Package Exports

text-kebab-case
text-kebab-case/dist.es2015/index.js
text-kebab-case/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (text-kebab-case) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Kebab Case

Transform text into kebab-case format where words are lowercase and separated by hyphens.

🚀 Features

Lightweight - Only ~450B minified + gzipped
Type-safe - Full TypeScript support with comprehensive type definitions
Zero dependencies - No external dependencies
Tree-shakeable - ES modules support
Universal - Works in browsers, Node.js, and serverless environments
Well-tested - Comprehensive test suite with edge cases
Customizable - Flexible options for advanced use cases

📦 Installation

# npm
npm install text-kebab-case

# yarn
yarn add text-kebab-case

# pnpm
pnpm add text-kebab-case

# bun
bun add text-kebab-case

🎯 Quick Start

import { kebabCase } from "text-kebab-case";

console.log(kebabCase("hello world")); // "hello-world"
console.log(kebabCase("userProfileData")); // "user-profile-data"
console.log(kebabCase("backgroundColor")); // "background-color"

📖 Usage

ES Modules (Recommended)

import { kebabCase } from "text-kebab-case";

console.log(kebabCase("hello world")); // "hello-world"

CommonJS

const { kebabCase } = require("text-kebab-case");

console.log(kebabCase("hello world")); // "hello-world"

TypeScript

import { kebabCase, kebabCaseTransformMerge, Options } from "text-kebab-case";

const result: string = kebabCase("hello world");
console.log(result); // "hello-world"

🔄 Transformation Examples

Basic Transformations

import { kebabCase } from "text-kebab-case";

// From different cases
kebabCase("hello world"); // "hello-world"
kebabCase("Hello World"); // "hello-world"
kebabCase("HELLO WORLD"); // "hello-world"
kebabCase("camelCase"); // "camel-case"
kebabCase("PascalCase"); // "pascal-case"
kebabCase("snake_case"); // "snake-case"
kebabCase("dot.case"); // "dot-case"
kebabCase("CONSTANT_CASE"); // "constant-case"

// Complex examples
kebabCase("XMLHttpRequest"); // "xml-http-request"
kebabCase("iPhone"); // "i-phone"
kebabCase("version 1.2.3"); // "version-1-2-3"
kebabCase("userProfileData"); // "user-profile-data"

Advanced Options

import { kebabCase, kebabCaseTransformMerge } from "text-kebab-case";

// Custom transform to merge numbers without separator
kebabCase("version 1.2.3", {
  transform: kebabCaseTransformMerge,
}); // "version-123"

// Custom word splitting
kebabCase("XMLHttpRequest", {
  splitRegexp: /([a-z])([A-Z])/g,
}); // "xml-http-request"

// Custom character stripping
kebabCase("hello@world.com", {
  stripRegexp: /[@.]/g,
}); // "hello-world-com"

// Custom transformation function
kebabCase("API-v2-endpoint", {
  transform: (word, index) => {
    if (word === "API") return "api";
    if (word === "v2") return "v2";
    return word.toLowerCase();
  },
}); // "api-v2-endpoint"

🌍 Real-World Examples

CSS Class Names

import { kebabCase } from "text-kebab-case";

// Component classes
kebabCase("primaryButton"); // "primary-button"
kebabCase("navigationBar"); // "navigation-bar"
kebabCase("formInput"); // "form-input"
kebabCase("modalDialog"); // "modal-dialog"
kebabCase("loadingSpinner"); // "loading-spinner"

HTML Attributes

import { kebabCase } from "text-kebab-case";

// Data attributes
kebabCase("dataToggle"); // "data-toggle"
kebabCase("ariaLabel"); // "aria-label"
kebabCase("tabIndex"); // "tab-index"
kebabCase("customAttribute"); // "custom-attribute"
kebabCase("roleButton"); // "role-button"

URL Slugs

import { kebabCase } from "text-kebab-case";

// Blog post slugs
kebabCase("My Blog Post Title"); // "my-blog-post-title"
kebabCase("Product Category"); // "product-category"
kebabCase("Special Characters!"); // "special-characters"
kebabCase("How to Use APIs"); // "how-to-use-apis"

File Names

import { kebabCase } from "text-kebab-case";

// Component files
kebabCase("userProfile.component"); // "user-profile-component"
kebabCase("apiService"); // "api-service"
kebabCase("configUtils"); // "config-utils"
kebabCase("authMiddleware"); // "auth-middleware"

Object Key Transformation

import { kebabCase } from "text-kebab-case";

// Transform object keys for CSS-in-JS
const styles = {
  backgroundColor: "#fff",
  fontSize: "16px",
  marginTop: "10px",
  borderRadius: "4px",
};

const cssStyles = Object.fromEntries(
  Object.entries(styles).map(([key, value]) => [kebabCase(key), value]),
);

console.log(cssStyles);
// {
//   "background-color": "#fff",
//   "font-size": "16px",
//   "margin-top": "10px",
//   "border-radius": "4px"
// }

📖 API Reference

`kebabCase(input, options?)`

Converts a string to kebab-case.

Parameters

input (string): The string to convert
options (Options, optional): Configuration options

Returns

string: The kebab-case formatted string

Options

interface Options {
  // Custom transform function for word processing
  transform?: (word: string, index: number, words: string[]) => string;

  // Regex to strip characters before processing
  stripRegexp?: RegExp;

  // Custom split function
  split?: (value: string) => string[];
}

`kebabCaseTransformMerge`

A transform function that merges numeric characters without separation.

import { kebabCase, kebabCaseTransformMerge } from "text-kebab-case";

kebabCase("version 1.2.3", { transform: kebabCaseTransformMerge }); // "version-123"

🔧 Advanced Configuration

Custom Word Splitting

import { kebabCase } from "text-kebab-case";

// Split on specific patterns
kebabCase("XMLHttpRequest", {
  splitRegexp: /([a-z])([A-Z])/g,
}); // "xml-http-request"

// Split on numbers
kebabCase("user123data", {
  splitRegexp: /([a-zA-Z])(\d)/g,
}); // "user-123-data"

Custom Character Stripping

import { kebabCase } from "text-kebab-case";

// Strip specific characters
kebabCase("hello@world.com", {
  stripRegexp: /[@.]/g,
}); // "hello-world-com"

// Strip all non-alphanumeric
kebabCase("hello!@#world", {
  stripRegexp: /[^a-zA-Z0-9]/g,
}); // "hello-world"

Custom Transform Functions

import { kebabCase } from "text-kebab-case";

// Preserve specific formatting
kebabCase("XML-HTTP-Request", {
  transform: (word, index) => {
    const acronyms = ["xml", "http", "api", "url"];
    if (acronyms.includes(word.toLowerCase())) {
      return word.toLowerCase();
    }
    return word.toLowerCase();
  },
}); // "xml-http-request"

// Custom business logic
kebabCase("UserV2API", {
  transform: (word, index) => {
    if (word === "V2") return "v2";
    if (word === "API") return "api";
    return word.toLowerCase();
  },
}); // "user-v2-api"

📊 Bundle Size

This package is optimized for minimal bundle size:

Minified: ~450B
Gzipped: ~250B
Tree-shakeable: Yes
Side effects: None

🌍 Browser Support

Modern browsers: ES2015+ (Chrome 51+, Firefox 54+, Safari 10+)
Node.js: 12+
TypeScript: 4.0+
Bundle formats: UMD, ESM, CommonJS

🧪 Testing

# Run tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with coverage
pnpm test --coverage

# Type checking
pnpm typecheck

# Linting
pnpm lint

text-camel-case - Convert to camelCase
text-capital-case - Convert to Capital Case
text-constant-case - Convert to CONSTANT_CASE
text-dot-case - Convert to dot.case
text-header-case - Convert to Header-Case
text-case - All case transformations in one package

📜 License

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

🆘 Support

📧 Email: selikhov.dmitrey@gmail.com
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions
📖 Documentation: Full Documentation

Made with ❤️ by Dmitry Selikhov

text-kebab-case