transformCamelKebabCase
Converts between camelCase
and kebab-case
formats.
1/**
2 * Converts between camelCase and kebab-case formats.
3 *
4 * @param str - The input string.
5 * @param direction - Direction of transformation: 'camelToKebab' or 'kebabToCamel'.
6 * @returns Transformed string in the desired format.
7 */
8export function transformCamelKebabCase(
9 str: string,
10 direction: 'camelToKebab' | 'kebabToCamel'
11): string {
12 if (direction === 'camelToKebab') {
13 return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
14 }
15
16 if (direction === 'kebabToCamel') {
17 return str.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
18 }
19
20 throw new Error('Invalid direction: use "camelToKebab" or "kebabToCamel"');
21}
Bidirectional Conversion
Handles both directions:
camelCase → kebab-case
andkebab-case → camelCase
using a unified API.Lightweight and Dependency-Free
Avoids external libraries, relying on concise and performant regular expressions.
Clear Direction Control
Explicit
direction
parameter prevents ambiguity and allows for controlled, reversible transformation.Safe and Defensive Design
Throws an error for invalid directions, making incorrect usage easier to catch during development.
Tests | Examples
1test('transformCamelKebabCase - camel to kebab', () => {
2 expect(transformCamelKebabCase('myVariableName', 'camelToKebab')).toBe('my-variable-name');
3});
4
5test('transformCamelKebabCase - kebab to camel', () => {
6 expect(transformCamelKebabCase('my-variable-name', 'kebabToCamel')).toBe('myVariableName');
7});
8
9test('transformCamelKebabCase - empty string', () => {
10 expect(transformCamelKebabCase('', 'camelToKebab')).toBe('');
11 expect(transformCamelKebabCase('', 'kebabToCamel')).toBe('');
12});
13
14test('transformCamelKebabCase - kebab with leading dash', () => {
15 expect(transformCamelKebabCase('-foo-bar', 'kebabToCamel')).toBe('FooBar');
16});
17
18test('transformCamelKebabCase - camel with no caps', () => {
19 expect(transformCamelKebabCase('plain', 'camelToKebab')).toBe('plain');
20});
21
22test('transformCamelKebabCase - invalid direction throws', () => {
23 expect(() => transformCamelKebabCase('test', 'unknown' as any)).toThrow(
24 'Invalid direction: use "camelToKebab" or "kebabToCamel"'
25 );
26});
Common Use Cases
Dynamic HTML Attribute Handling
Convert between JavaScript-style camelCase (e.g.,
dataUserId
) and HTML attribute style (e.g.,data-user-id
).CSS-in-JS Utilities
Transform object-style camelCase keys to kebab-case for inline style generation or CSS custom property binding.
Code Generators and Builders
Seamlessly translate naming conventions when generating code or templates across different layers (e.g., JS → SCSS).
Form and API Normalization
Normalize or convert naming formats when syncing form field names or API responses with frontend logic.
Linter or Formatter Plugins
Use as a helper in tooling that enforces or transforms naming style rules for consistency across projects.