Yevhen Klymentiev
dark
light
console
darkness
y.klymentiev@gmail.com
Reusable Snippets|Practical utility code for everyday use — custom-built and ready to share

transformCamelKebabCase

Converts between camelCase and kebab-case formats.

TypeScript
Copied!
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 and kebab-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

TypeScript
Copied!
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.

Codebase: Utilities -> Strings -> transformCamelKebabCase | Yevhen Klymentiev