dash

Convert a string to kebab-case format (hyphen-separated).

Basic Usage

import { dash } from 'radash'

console.log(dash('hello world'))        // 'hello-world'
console.log(dash('HelloWorld'))         // 'hello-world'
console.log(dash('hello_world'))        // 'hello-world'
console.log(dash('helloWorld'))         // 'hello-world'

Syntax

function dash(str: string): string

Parameters

• str (string): The string to convert

Return Value

Returns the string converted to kebab-case format.

Examples

Basic Conversion

import { dash } from 'radash'

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

Handling Special Characters

import { dash } from 'radash'

console.log(dash('hello.world'))        // 'hello-world'
console.log(dash('hello@world'))        // 'hello-world'
console.log(dash('hello#world'))        // 'hello-world'
console.log(dash('hello$world'))        // 'hello-world'
console.log(dash('hello%world'))        // 'hello-world'
console.log(dash('hello^world'))        // 'hello-world'
console.log(dash('hello&world'))        // 'hello-world'

Handling Numbers

import { dash } from 'radash'

console.log(dash('hello123world'))      // 'hello123-world'
console.log(dash('123hello456world'))   // '123-hello456-world'
console.log(dash('hello123'))           // 'hello123'
console.log(dash('123hello'))           // '123-hello'

Handling Consecutive Separators

import { dash } from 'radash'

console.log(dash('hello   world'))      // 'hello-world'
console.log(dash('hello___world'))      // 'hello-world'
console.log(dash('hello---world'))      // 'hello-world'
console.log(dash('hello...world'))      // 'hello-world'

Handling Edge Cases

import { dash } from 'radash'

console.log(dash(''))                   // ''
console.log(dash('hello'))              // 'hello'
console.log(dash('   hello   '))        // 'hello'
console.log(dash('HELLO'))              // 'hello'
console.log(dash('hello-world'))        // 'hello-world'

Handling Complex Strings

import { dash } from 'radash'

console.log(dash('UserProfileComponent'))    // 'user-profile-component'
console.log(dash('APIResponseData'))         // 'api-response-data'
console.log(dash('HTTPStatusCode'))          // 'http-status-code'
console.log(dash('JSONWebToken'))            // 'json-web-token'
console.log(dash('CSSGridLayout'))           // 'css-grid-layout'

Handling File Names

import { dash } from 'radash'

console.log(dash('userProfile.js'))         // 'user-profile-js'
console.log(dash('UserProfile.tsx'))        // 'user-profile-tsx'
console.log(dash('api_response.json'))      // 'api-response-json'
console.log(dash('config_file.yaml'))       // 'config-file-yaml'

Handling CSS Class Names

import { dash } from 'radash'

console.log(dash('userProfile'))            // 'user-profile'
console.log(dash('userProfileActive'))      // 'user-profile-active'
console.log(dash('userProfileContainer'))   // 'user-profile-container'
console.log(dash('userProfileHeader'))      // 'user-profile-header'

Handling Database Field Names

import { dash } from 'radash'

console.log(dash('userName'))               // 'user-name'
console.log(dash('firstName'))              // 'first-name'
console.log(dash('lastName'))               // 'last-name'
console.log(dash('emailAddress'))           // 'email-address'
console.log(dash('phoneNumber'))            // 'phone-number'
console.log(dash('createdAt'))              // 'created-at'
console.log(dash('updatedAt'))              // 'updated-at'

Handling API Endpoints

import { dash } from 'radash'

console.log(dash('getUserProfile'))         // 'get-user-profile'
console.log(dash('updateUserSettings'))     // 'update-user-settings'
console.log(dash('deleteUserAccount'))      // 'delete-user-account'
console.log(dash('createNewPost'))          // 'create-new-post'
console.log(dash('fetchUserData'))          // 'fetch-user-data'

Handling Component Names

import { dash } from 'radash'

console.log(dash('UserProfile'))            // 'user-profile'
console.log(dash('UserProfileCard'))        // 'user-profile-card'
console.log(dash('UserProfileHeader'))      // 'user-profile-header'
console.log(dash('UserProfileFooter'))      // 'user-profile-footer'
console.log(dash('UserProfileContent'))     // 'user-profile-content'

Handling Event Names

import { dash } from 'radash'

console.log(dash('onClick'))                // 'on-click'
console.log(dash('onSubmit'))               // 'on-submit'
console.log(dash('onChange'))               // 'on-change'
console.log(dash('onFocus'))                // 'on-focus'
console.log(dash('onBlur'))                 // 'on-blur'
console.log(dash('onKeyDown'))              // 'on-key-down'
console.log(dash('onMouseEnter'))           // 'on-mouse-enter'

Handling Config Keys

import { dash } from 'radash'

console.log(dash('apiBaseUrl'))             // 'api-base-url'
console.log(dash('databaseConnection'))     // 'database-connection'
console.log(dash('redisCache'))             // 'redis-cache'
console.log(dash('sessionTimeout'))         // 'session-timeout'
console.log(dash('maxRetryAttempts'))      // 'max-retry-attempts'

Handling URL Paths

import { dash } from 'radash'

console.log(dash('userProfile'))            // 'user-profile'
console.log(dash('userSettings'))           // 'user-settings'
console.log(dash('userDashboard'))          // 'user-dashboard'
console.log(dash('userNotifications'))      // 'user-notifications'
console.log(dash('userPreferences'))        // 'user-preferences'

Handling HTML Attributes

import { dash } from 'radash'

console.log(dash('dataUserId'))             // 'data-user-id'
console.log(dash('ariaLabel'))              // 'aria-label'
console.log(dash('ariaDescribedby'))       // 'aria-describedby'
console.log(dash('ariaLabelledby'))        // 'aria-labelledby'
console.log(dash('ariaHidden'))             // 'aria-hidden'

Handling CSS Properties

import { dash } from 'radash'

console.log(dash('backgroundColor'))        // 'background-color'
console.log(dash('borderRadius'))           // 'border-radius'
console.log(dash('fontSize'))               // 'font-size'
console.log(dash('lineHeight'))             // 'line-height'
console.log(dash('textAlign'))              // 'text-align'
console.log(dash('marginTop'))              // 'margin-top'
console.log(dash('paddingLeft'))            // 'padding-left'

Handling JavaScript Variables

import { dash } from 'radash'

console.log(dash('userName'))               // 'user-name'
console.log(dash('firstName'))              // 'first-name'
console.log(dash('lastName'))               // 'last-name'
console.log(dash('emailAddress'))           // 'email-address'
console.log(dash('phoneNumber'))            // 'phone-number'
console.log(dash('isActive'))               // 'is-active'
console.log(dash('hasPermission'))          // 'has-permission'

Handling Constant Names

import { dash } from 'radash'

console.log(dash('API_BASE_URL'))          // 'api-base-url'
console.log(dash('MAX_RETRY_ATTEMPTS'))    // 'max-retry-attempts'
console.log(dash('DEFAULT_TIMEOUT'))       // 'default-timeout'
console.log(dash('USER_ROLE_ADMIN'))       // 'user-role-admin'
console.log(dash('SESSION_TOKEN_KEY'))     // 'session-token-key'

Handling Enum Values

import { dash } from 'radash'

console.log(dash('UserStatusActive'))       // 'user-status-active'
console.log(dash('UserStatusInactive'))    // 'user-status-inactive'
console.log(dash('UserRoleAdmin'))         // 'user-role-admin'
console.log(dash('UserRoleUser'))          // 'user-role-user'
console.log(dash('UserRoleGuest'))         // 'user-role-guest'

Handling Type Names

import { dash } from 'radash'

console.log(dash('UserProfile'))            // 'user-profile'
console.log(dash('UserSettings'))           // 'user-settings'
console.log(dash('ApiResponse'))            // 'api-response'
console.log(dash('DatabaseConnection'))     // 'database-connection'
console.log(dash('HttpStatusCode'))         // 'http-status-code'

Handling Interface Names

import { dash } from 'radash'

console.log(dash('IUserProfile'))           // 'i-user-profile'
console.log(dash('IUserSettings'))          // 'i-user-settings'
console.log(dash('IApiResponse'))           // 'i-api-response'
console.log(dash('IDatabaseConnection'))    // 'i-database-connection'
console.log(dash('IHttpStatusCode'))        // 'i-http-status-code'

Handling Function Names

import { dash } from 'radash'

console.log(dash('getUserProfile'))         // 'get-user-profile'
console.log(dash('updateUserSettings'))     // 'update-user-settings'
console.log(dash('deleteUserAccount'))      // 'delete-user-account'
console.log(dash('createNewPost'))          // 'create-new-post'
console.log(dash('fetchUserData'))          // 'fetch-user-data'
console.log(dash('validateUserInput'))      // 'validate-user-input'

Handling Class Names

import { dash } from 'radash'

console.log(dash('UserProfileService'))     // 'user-profile-service'
console.log(dash('UserSettingsController')) // 'user-settings-controller'
console.log(dash('ApiResponseHandler'))     // 'api-response-handler'
console.log(dash('DatabaseConnectionPool')) // 'database-connection-pool'
console.log(dash('HttpStatusCodeMapper'))   // 'http-status-code-mapper'

Notes

1. Case Conversion: All characters are converted to lowercase
2. Separator Handling: Spaces, underscores, hyphens, etc. are all converted to a single hyphen
3. Consecutive Separators: Multiple consecutive separators are merged into a single hyphen
4. Edge Handling: Leading and trailing separators are removed
5. Special Characters: Non-alphanumeric characters are converted to hyphens

Differences from Other Methods

• camel(): Converts to camelCase
• pascal(): Converts to PascalCase
• snake(): Converts to snake_case
• dash(): Converts to kebab-case

Practical Application Scenarios

1. CSS Class Names: Generate CSS class names
2. HTML Attributes: Generate HTML attribute names
3. URL Paths: Generate URL-friendly paths
4. File Names: Generate file names
5. Config Keys: Generate keys in config files