react-case-formatter

A lightweight React utility library for formatting text cases (camelCase, PascalCase, etc.).

Features

• 🔠 Multiple Formatting Options: camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, Title Case, Sentence case, and more.
• ⚛️ React Components: Ready-to-use React components for each formatting style.
• 🪝 React Hooks: Custom hooks for easily implementing case formatting in functional components.
• 🔧 Utility Functions: Standalone formatter functions for use in any context.
• 📦 Zero Dependencies: Lightweight with zero runtime dependencies.
• 📱 TypeScript Support: Built with TypeScript for enhanced developer experience.

Installation

1# npm
2npm install react-case-formatter
3
4# yarn
5yarn add react-case-formatter
6
7# pnpm
8pnpm add react-case-formatter

Quick Start

1import React, { useState } from "react";
2import {
3  CamelCase,
4  PascalCase,
5  SnakeCase,
6  useCaseFormatter,
7} from "react-case-formatter";
8
9function App() {
10  // Using individual components
11  return (
12    <div>
13      <h3>Component Examples:</h3>
14      <p>
15        <CamelCase>Hello World Example</CamelCase>
16      </p> {/* helloWorldExample */}
17      <p>
18        <PascalCase>Hello World Example</PascalCase>
19      </p>{" "}
20      {/* HelloWorldExample */}
21      <p>
22        <SnakeCase>Hello World Example</SnakeCase>
23      </p> {/* hello_world_example */}
24      <FormatterDemo />
25    </div>
26  );
27}
28
29// Using the hook
30function FormatterDemo() {
31  const [input, setInput] = useState("Hello World Example");
32  const [formatted, updateFormatted] = useCaseFormatter(input);
33
34  const handleChange = (e) => {
35    const newValue = e.target.value;
36    setInput(newValue);
37    updateFormatted(newValue);
38  };
39
40  return (
41    <div>
42      <h3>Hook Example:</h3>
43      <input
44        type="text"
45        value={input}
46        onChange={handleChange}
47        placeholder="Type something..."
48      />
49
50      <div style={{ marginTop: "10px" }}>
51        <p>camelCase: {formatted.camelCase}</p>
52        <p>PascalCase: {formatted.pascalCase}</p>
53        <p>snake_case: {formatted.snakeCase}</p>
54        <p>kebab-case: {formatted.kebabCase}</p>
55        <p>CONSTANT_CASE: {formatted.constantCase}</p>
56        <p>Title Case: {formatted.titleCase}</p>
57        <p>Sentence case: {formatted.sentenceCase}</p>
58      </div>
59    </div>
60  );
61}
62
63export default App;

API

Utility Functions

1import {
2  toCamelCase,
3  toPascalCase,
4  toSnakeCase,
5  toKebabCase,
6  toConstantCase,
7  toTitleCase,
8  toSentenceCase,
9  toLowerCase,
10  toUpperCase,
11  capitalizeFirstLetter,
12  capitalizeWords,
13} from "react-case-formatter";
14
15// Examples
16toCamelCase("Hello World"); // 'helloWorld'
17toPascalCase("hello world"); // 'HelloWorld'
18toSnakeCase("Hello World"); // 'hello_world'
19toKebabCase("Hello World"); // 'hello-world'
20toConstantCase("Hello World"); // 'HELLO_WORLD'
21toTitleCase("hello world"); // 'Hello World'
22toSentenceCase("hello WORLD"); // 'Hello world'
23toLowerCase("Hello World"); // 'hello world'
24toUpperCase("Hello World"); // 'HELLO WORLD'
25capitalizeFirstLetter("hello"); // 'Hello'
26capitalizeWords("hello world"); // 'Hello World'

React Components

1import {
2  CamelCase,
3  PascalCase,
4  SnakeCase,
5  KebabCase,
6  ConstantCase,
7  TitleCase,
8  SentenceCase,
9  UpperCase,
10  LowerCase,
11  Capitalized,
12  CapitalizedWords,
13  CaseFormatter
14} from 'react-case-formatter';
15
16// Examples
17<CamelCase>Hello World</CamelCase>              // helloWorld
18<PascalCase>Hello World</PascalCase>            // HelloWorld
19<SnakeCase>Hello World</SnakeCase>              // hello_world
20<KebabCase>Hello World</KebabCase>              // hello-world
21<ConstantCase>Hello World</ConstantCase>        // HELLO_WORLD
22<TitleCase>hello of the world</TitleCase>       // Hello of the World
23<SentenceCase>HELLO WORLD</SentenceCase>        // Hello world
24<UpperCase>Hello World</UpperCase>              // HELLO WORLD
25<LowerCase>Hello World</LowerCase>              // hello world
26<Capitalized>hello world</Capitalized>          // Hello world
27<CapitalizedWords>hello world</CapitalizedWords>// Hello World
28
29// Dynamic formatter
30<CaseFormatter format="camel">Hello World</CaseFormatter>  // helloWorld
31<CaseFormatter format="pascal">Hello World</CaseFormatter> // HelloWorld
32
33// Use with custom element type
34<CamelCase as="div">Hello World</CamelCase>
35<PascalCase as="h1">Hello World</PascalCase>
36
37// Use with text prop instead of children
38<CamelCase text="Hello World" />

React Hooks

1import {
2  useCamelCase,
3  usePascalCase,
4  useSnakeCase,
5  useKebabCase,
6  useConstantCase,
7  useTitleCase,
8  useSentenceCase,
9  useCaseFormatter,
10} from "react-case-formatter";
11
12function MyComponent() {
13  // Individual case hooks
14  const [camelCaseValue, updateCamelCase] = useCamelCase("Hello World");
15  const [pascalCaseValue, updatePascalCase] = usePascalCase("Hello World");
16
17  // Or use the combined hook to get all formats at once
18  const [formattedValues, updateAllFormats] = useCaseFormatter("Hello World");
19
20  return (
21    <div>
22      <p>Camel Case: {camelCaseValue}</p>
23      <p>Pascal Case: {pascalCaseValue}</p>
24
25      <button onClick={() => updateCamelCase("New Example Text")}>
26        Update Camel Case
27      </button>
28
29      <hr />
30
31      <h3>All Formats:</h3>
32      <p>Original: {formattedValues.original}</p>
33      <p>Camel: {formattedValues.camelCase}</p>
34      <p>Pascal: {formattedValues.pascalCase}</p>
35      <p>Snake: {formattedValues.snakeCase}</p>
36      <p>Kebab: {formattedValues.kebabCase}</p>
37      <p>Constant: {formattedValues.constantCase}</p>
38      <p>Title: {formattedValues.titleCase}</p>
39      <p>Sentence: {formattedValues.sentenceCase}</p>
40
41      <button onClick={() => updateAllFormats("Updated All Formats")}>
42        Update All Formats
43      </button>
44    </div>
45  );
46}

Authors

• Ayo Niyi @ayoniyi