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 convertoptions
(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
๐ Related Packages
text-camel-case
- Convert to camelCasetext-pascal-case
- Convert to PascalCasetext-snake-case
- Convert to snake_casetext-title-case
- Convert to Title Casetext-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