React Title Case is a simple React Hook that provides a callback for Vercel's title library, which correctly capitalizes strings as per The Chicago Manual of Style.

Installation

# Using pnpm
pnpm add use-title-case

# Using yarn
yarn add use-title-case

# Using npm
npm install use-title-case

Usage

Hook

import { useTitleCase } from "use-title-case";

export const YourSnazzyComponent = () => {
  const title = useTitleCase();

  return (
    <div>
      <h1>{title("i Am An INCorrectly capitAlized TITLE")}</h1>
    </div>
  );
};
// The <h1/ > element's text will be rendered as "I am an Incorrectly Capitalized Title"

Component

import { TitleCase } from "use-title-case";

export const YourSnazzyComponent = () => {
  return (
    <div>
      <h1>
        <TitleCase>i Am An INCorrectly capitAlized TITLE</TitleCase>
      </h1>
    </div>
  );
};
// The <h1/ > element's text will be rendered as "I am an Incorrectly Capitalized Title"

Overrides

React Title Case comes with some (primarily networking/infrastructure-focused) built-in overrides. However, you can add override strings in multiple ways, as needed:

Per-Hook

import { useTitleCase } from "use-title-case";

export const YourSnazzyComponent = () => {
  const title = useTitleCase({ overrides: ["TITLE"] });

  return (
    <div>
      <h1>{title("i Am An INCorrectly capitAlized TITLE")}</h1>
    </div>
  );
};
// The <h1/ > element's text will be rendered as "I am an Incorrectly Capitalized TITLE"

Environment Variables

# As a comma-separated list:
export USER_OVERRIDES="INCorrectly,TITLE"

# As a JSON array:
export USER_OVERRIDES="[INCorrectly,TITLE]"

# This will also work:
export USER_OVERRIDES='["INCorrectly","TITLE"]'

Context Provider

import { TitleCaseProvider, useTitleCase } from "use-title-case";

export const YourSnazzyComponent = () => {
  const title = useTitleCase();

  return (
    <div>
      <h1>{title("i Am An INCorrectly capitAlized TITLE")}</h1>
    </div>
  );
};

export const App = () => {
  return (
    <TitleCaseProvider overrides={["INCorrectly", "TITLE"]}>
      <YourSnazzyComponent />
    </TitleCaseProvider>
  );
};
// The <h1/ > element's text will be rendered as "I am an INCorrectly Capitalized TITLE"

Options

| Property | Type | Default | Description | | :------------ | :--------- | :------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | | overrides | string[] | See here | Provide an array of strings that should not be capitalized | | useBuiltIns | boolean | true | Set to false if you don't want to use the default overrides. |