Hidden

Overview

Converts a string to kebab-case format by handling camelCase, PascalCase, snake_case, and other formats, converting them to lowercase words separated by hyphens.

kebabCase(/str/);

Features

• Converts strings to kebab-case format (lowercase with hyphens)
• Handles camelCase and PascalCase conversion
• Converts underscores and special characters to hyphens
• Processes accented characters using slugify internally
• Collapses multiple consecutive hyphens into a single hyphen
• Removes leading and trailing hyphens
• Returns empty string for invalid inputs
• Uses internal utilities for robust processing
• Comprehensive testing

Arguments

Arg	Type	Default Value	Required
str	string	-	Yes

Usage

Use the kebabCase() function to convert strings to kebab-case format.

import { kebabCase } from '@inpulse-ui/utils';

const result = kebabCase('Hello World');
console.log(result); // "hello-world"

Converts camelCase and PascalCase:

console.log(kebabCase('firstName')); // "first-name"
console.log(kebabCase('lastName')); // "last-name"
console.log(kebabCase('MyComponent')); // "my-component"
console.log(kebabCase('getUserProfile')); // "get-user-profile"

Handles consecutive capital letters:

console.log(kebabCase('APIEndpoint')); // "api-endpoint"
console.log(kebabCase('XMLHttpRequest')); // "xml-http-request"
console.log(kebabCase('URLParser')); // "url-parser"

Converts underscores and special characters:

console.log(kebabCase('API_ENDPOINT')); // "api-endpoint"
console.log(kebabCase('user_name')); // "user-name"
console.log(kebabCase('file@name.txt')); // "file-name-txt"
console.log(kebabCase('hello$world!')); // "hello-world"

Returns empty string for invalid inputs:

console.log(kebabCase('')); // ""
console.log(kebabCase(null)); // ""
console.log(kebabCase(undefined)); // ""
console.log(kebabCase(123)); // ""

Examples

HTML attribute and CSS class generation - converting JavaScript property names to web-friendly formats:

import { kebabCase } from '@inpulse-ui/utils';

// Component props to HTML attributes
const componentProps = {
  backgroundColor: '#ff0000',
  fontSize: '16px',
  borderRadius: '4px',
  marginTop: '10px'
};

// Convert to CSS custom properties
const cssVars = Object.entries(componentProps)
  .map(([key, value]) => `--${kebabCase(key)}: ${value}`)
  .join('; ');

console.log(cssVars);
// "--background-color: #ff0000; --font-size: 16px; --border-radius: 4px; --margin-top: 10px"

// Use in HTML
const htmlElement = `<div style="${cssVars}">Content</div>`;
console.log(htmlElement);
// <div style="--background-color: #ff0000; --font-size: 16px; --border-radius: 4px; --margin-top: 10px">Content</div>

CSS class name generation:

const componentNames = [
  'NavigationBar',
  'UserProfile',
  'SearchInput',
  'ProductCard'
];

const cssClasses = componentNames.map(name => kebabCase(name));
console.log(cssClasses);
// ['navigation-bar', 'user-profile', 'search-input', 'product-card']

API endpoint generation:

const apiMethods = [
  'getUserProfile',
  'updateUserSettings',
  'deleteAccount',
  'getOrderHistory'
];

const endpoints = apiMethods.map(method => `/api/${kebabCase(method)}`);
console.log(endpoints);
// [
//   '/api/get-user-profile',
//   '/api/update-user-settings',
//   '/api/delete-account',
//   '/api/get-order-history'
// ]

File name conversion:

const jsFileNames = [
  'MyComponent.jsx',
  'UserService.js',
  'APIClient.ts',
  'ProductHelper.js'
];

const kebabFileNames = jsFileNames.map(fileName => {
  const [name, ext] = fileName.split('.');
  return `${kebabCase(name)}.${ext}`;
});

console.log(kebabFileNames);
// ['my-component.jsx', 'user-service.js', 'api-client.ts', 'product-helper.js']