title

Converts a string to title case, capitalizing the first letter of each word.

Basic Usage

import { title } from 'radash'

console.log(title('hello world'))        // 'Hello World'
console.log(title('hello-world'))        // 'Hello World'
console.log(title('hello_world'))        // 'Hello World'
console.log(title('helloWorld'))         // 'Hello World'

Syntax

function title(str: string): string

Parameters

• str (string): The string to convert

Return Value

Returns the string converted to title case, with the first letter of each word capitalized.

Examples

Basic Conversion

import { title } from 'radash'

console.log(title('hello world'))        // 'Hello World'
console.log(title('Hello World'))        // 'Hello World'
console.log(title('HELLO WORLD'))        // 'Hello World'
console.log(title('helloWorld'))         // 'Hello World'
console.log(title('HelloWorld'))         // 'Hello World'
console.log(title('hello_world'))        // 'Hello World'
console.log(title('hello-world'))        // 'Hello World'

Handling Special Characters

import { title } from 'radash'

console.log(title('hello.world'))        // 'Hello World'
console.log(title('hello@world'))        // 'Hello World'
console.log(title('hello#world'))        // 'Hello World'
console.log(title('hello$world'))        // 'Hello World'
console.log(title('hello%world'))        // 'Hello World'
console.log(title('hello^world'))        // 'Hello World'
console.log(title('hello&world'))        // 'Hello World'

Handling Numbers

import { title } from 'radash'

console.log(title('hello123world'))      // 'Hello123 World'
console.log(title('123hello456world'))   // '123 Hello456 World'
console.log(title('hello123'))           // 'Hello123'
console.log(title('123hello'))           // '123 Hello'

Handling Consecutive Delimiters

import { title } from 'radash'

console.log(title('hello   world'))      // 'Hello World'
console.log(title('hello___world'))      // 'Hello World'
console.log(title('hello---world'))      // 'Hello World'
console.log(title('hello...world'))      // 'Hello World'

Handling Edge Cases

import { title } from 'radash'

console.log(title(''))                   // ''
console.log(title('hello'))              // 'Hello'
console.log(title('   hello   '))        // 'Hello'
console.log(title('HELLO'))              // 'Hello'
console.log(title('hello world'))        // 'Hello World'

Handling Complex Strings

import { title } from 'radash'

console.log(title('user profile component'))    // 'User Profile Component'
console.log(title('api response data'))         // 'Api Response Data'
console.log(title('http status code'))          // 'Http Status Code'
console.log(title('json web token'))            // 'Json Web Token'
console.log(title('css grid layout'))           // 'Css Grid Layout'

Handling File Names

import { title } from 'radash'

console.log(title('user profile.js'))         // 'User Profile Js'
console.log(title('User Profile.tsx'))        // 'User Profile Tsx'
console.log(title('api response.json'))      // 'Api Response Json'
console.log(title('config file.yaml'))       // 'Config File Yaml'

Handling CSS Class Names

import { title } from 'radash'

console.log(title('user profile'))            // 'User Profile'
console.log(title('user profile active'))      // 'User Profile Active'
console.log(title('user profile container'))   // 'User Profile Container'
console.log(title('user profile header'))      // 'User Profile Header'

Handling Database Field Names

import { title } from 'radash'

console.log(title('user name'))               // 'User Name'
console.log(title('first name'))              // 'First Name'
console.log(title('last name'))               // 'Last Name'
console.log(title('email address'))           // 'Email Address'
console.log(title('phone number'))            // 'Phone Number'
console.log(title('created at'))              // 'Created At'
console.log(title('updated at'))              // 'Updated At'

Handling API Endpoints

import { title } from 'radash'

console.log(title('get user profile'))         // 'Get User Profile'
console.log(title('update user settings'))     // 'Update User Settings'
console.log(title('delete user account'))      // 'Delete User Account'
console.log(title('create new post'))          // 'Create New Post'
console.log(title('fetch user data'))          // 'Fetch User Data'

Handling Component Names

import { title } from 'radash'

console.log(title('user profile'))            // 'User Profile'
console.log(title('user profile card'))        // 'User Profile Card'
console.log(title('user profile header'))      // 'User Profile Header'
console.log(title('user profile footer'))      // 'User Profile Footer'
console.log(title('user profile content'))     // 'User Profile Content'

Handling Event Names

import { title } from 'radash'

console.log(title('on click'))                // 'On Click'
console.log(title('on submit'))               // 'On Submit'
console.log(title('on change'))               // 'On Change'
console.log(title('on focus'))                // 'On Focus'
console.log(title('on blur'))                 // 'On Blur'
console.log(title('on key down'))              // 'On Key Down'
console.log(title('on mouse enter'))           // 'On Mouse Enter'

Handling Configuration Keys

import { title } from 'radash'

console.log(title('api base url'))             // 'Api Base Url'
console.log(title('database connection'))     // 'Database Connection'
console.log(title('redis cache'))             // 'Redis Cache'
console.log(title('session timeout'))         // 'Session Timeout'
console.log(title('max retry attempts'))      // 'Max Retry Attempts'

Handling URL Paths

import { title } from 'radash'

console.log(title('user profile'))            // 'User Profile'
console.log(title('user settings'))           // 'User Settings'
console.log(title('user dashboard'))          // 'User Dashboard'
console.log(title('user notifications'))      // 'User Notifications'
console.log(title('user preferences'))        // 'User Preferences'

Handling HTML Attributes

import { title } from 'radash'

console.log(title('data user id'))             // 'Data User Id'
console.log(title('aria label'))              // 'Aria Label'
console.log(title('aria describedby'))       // 'Aria Describedby'
console.log(title('aria labelledby'))        // 'Aria Labelledby'
console.log(title('aria hidden'))             // 'Aria Hidden'

Handling CSS Properties

import { title } from 'radash'

console.log(title('background color'))        // 'Background Color'
console.log(title('border radius'))           // 'Border Radius'
console.log(title('font size'))               // 'Font Size'
console.log(title('line height'))             // 'Line Height'
console.log(title('text align'))              // 'Text Align'
console.log(title('margin top'))              // 'Margin Top'
console.log(title('padding left'))            // 'Padding Left'

Handling JavaScript Variables

import { title } from 'radash'

console.log(title('user name'))               // 'User Name'
console.log(title('first name'))              // 'First Name'
console.log(title('last name'))               // 'Last Name'
console.log(title('email address'))           // 'Email Address'
console.log(title('phone number'))            // 'Phone Number'
console.log(title('is active'))               // 'Is Active'
console.log(title('has permission'))          // 'Has Permission'

Handling Constant Names

import { title } from 'radash'

console.log(title('api base url'))          // 'Api Base Url'
console.log(title('max retry attempts'))    // 'Max Retry Attempts'
console.log(title('default timeout'))       // 'Default Timeout'
console.log(title('user role admin'))       // 'User Role Admin'
console.log(title('session token key'))     // 'Session Token Key'

Handling Enum Values

import { title } from 'radash'

console.log(title('user status active'))       // 'User Status Active'
console.log(title('user status inactive'))    // 'User Status Inactive'
console.log(title('user role admin'))         // 'User Role Admin'
console.log(title('user role user'))          // 'User Role User'
console.log(title('user role guest'))         // 'User Role Guest'

Handling Type Names

import { title } from 'radash'

console.log(title('user profile'))            // 'User Profile'
console.log(title('user settings'))           // 'User Settings'
console.log(title('api response'))            // 'Api Response'
console.log(title('database connection'))     // 'Database Connection'
console.log(title('http status code'))         // 'Http Status Code'

Handling Interface Names

import { title } from 'radash'

console.log(title('i user profile'))           // 'I User Profile'
console.log(title('i user settings'))          // 'I User Settings'
console.log(title('i api response'))           // 'I Api Response'
console.log(title('i database connection'))    // 'I Database Connection'
console.log(title('i http status code'))        // 'I Http Status Code'

Handling Function Names

import { title } from 'radash'

console.log(title('get user profile'))         // 'Get User Profile'
console.log(title('update user settings'))     // 'Update User Settings'
console.log(title('delete user account'))      // 'Delete User Account'
console.log(title('create new post'))          // 'Create New Post'
console.log(title('fetch user data'))          // 'Fetch User Data'
console.log(title('validate user input'))      // 'Validate User Input'

Handling Class Names

import { title } from 'radash'

console.log(title('user profile service'))     // 'User Profile Service'
console.log(title('user settings controller')) // 'User Settings Controller'
console.log(title('api response handler'))     // 'Api Response Handler'
console.log(title('database connection pool')) // 'Database Connection Pool'
console.log(title('http status code mapper'))   // 'Http Status Code Mapper'

Handling Database Table Names

import { title } from 'radash'

console.log(title('user profile'))            // 'User Profile'
console.log(title('user settings'))           // 'User Settings'
console.log(title('api response'))            // 'Api Response'
console.log(title('database connection'))     // 'Database Connection'
console.log(title('http status code'))         // 'Http Status Code'

Handling API Response Fields

import { title } from 'radash'

console.log(title('response data'))           // 'Response Data'
console.log(title('error message'))           // 'Error Message'
console.log(title('status code'))             // 'Status Code'
console.log(title('request id'))              // 'Request Id'
console.log(title('timestamp'))               // 'Timestamp'

Handling Environment Variables

import { title } from 'radash'

console.log(title('node env'))               // 'Node Env'
console.log(title('database url'))           // 'Database Url'
console.log(title('api key'))                // 'Api Key'
console.log(title('secret token'))           // 'Secret Token'
console.log(title('redis host'))             // 'Redis Host'

Handling File Name Conversion

import { title } from 'radash'

function convertFileName(fileName: string): string {
  return title(fileName.replace(/\.[^/.]+$/, '')) // Remove extension
}

console.log(convertFileName('User Profile.tsx'))     // 'User Profile'
console.log(convertFileName('api response.json'))    // 'Api Response'
console.log(convertFileName('config file.yaml'))     // 'Config File'
console.log(convertFileName('index.js'))            // 'Index'

Handling Variable Name Conversion

import { title } from 'radash'

function convertVariableName(varName: string): string {
  return title(varName)
}

console.log(convertVariableName('user name'))         // 'User Name'
console.log(convertVariableName('first name'))        // 'First Name'
console.log(convertVariableName('email address'))     // 'Email Address'
console.log(convertVariableName('phone number'))      // 'Phone Number'

Handling Article Titles

import { title } from 'radash'

console.log(title('getting started with react'))      // 'Getting Started With React'
console.log(title('advanced typescript patterns'))    // 'Advanced Typescript Patterns'
console.log(title('best practices for api design'))   // 'Best Practices For Api Design'
console.log(title('modern javascript features'))      // 'Modern Javascript Features'

Handling Product Names

import { title } from 'radash'

console.log(title('user management system'))          // 'User Management System'
console.log(title('data analytics platform'))         // 'Data Analytics Platform'
console.log(title('cloud storage solution'))          // 'Cloud Storage Solution'
console.log(title('mobile app development'))          // 'Mobile App Development'

Handling Menu Items

import { title } from 'radash'

console.log(title('user profile'))                   // 'User Profile'
console.log(title('account settings'))               // 'Account Settings'
console.log(title('billing information'))            // 'Billing Information'
console.log(title('privacy policy'))                 // 'Privacy Policy'
console.log(title('terms of service'))               // 'Terms Of Service'

Handling Error Messages

import { title } from 'radash'

console.log(title('invalid email address'))           // 'Invalid Email Address'
console.log(title('password too short'))              // 'Password Too Short'
console.log(title('user not found'))                 // 'User Not Found'
console.log(title('access denied'))                   // 'Access Denied'
console.log(title('server error'))                    // 'Server Error'

Handling Success Messages

import { title } from 'radash'

console.log(title('user created successfully'))       // 'User Created Successfully'
console.log(title('profile updated'))                 // 'Profile Updated'
console.log(title('password changed'))                // 'Password Changed'
console.log(title('email verified'))                  // 'Email Verified'
console.log(title('account activated'))               // 'Account Activated'

Notes

1. Case Conversion: The first letter of each word is capitalized, the rest are lowercase
2. Delimiter Handling: Spaces, hyphens, underscores, etc. are recognized as word delimiters
3. Consecutive Delimiters: Multiple consecutive delimiters are merged into a single space
4. Boundary Handling: Delimiters at the beginning and end are removed
5. Special Characters: Non-alphanumeric characters are converted to spaces

Differences from Other Methods

• camel(): Converts to camel case
• pascal(): Converts to Pascal case
• dash(): Converts to dash-separated format
• snake(): Converts to underscore-separated format
• title(): Converts to title case

Practical Application Scenarios

1. Article Titles: Format article and blog titles
2. Product Names: Format product and service names
3. Menu Items: Format navigation menu items
4. Error Messages: Format user-friendly error messages
5. Success Messages: Format success notification messages