0.1.5 • Published 2 years ago
use-title-case v0.1.5
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. |