@f1stnpm2/ratione-maxime-doloribus
v1.0.0
Published
[![Routine Checks](https://github.com/f1stnpm2/ratione-maxime-doloribus/actions/workflows/test.yml/badge.svg)](https://github.com/f1stnpm2/ratione-maxime-doloribus/actions/workflows/test.yml) [![Codecov](https://img.shields.io/codecov/c/github/f1stnpm2/ra
Downloads
4
Maintainers
Readme
Component-titles
A hook for handling browser Document titles bound to components. Previous titles are restored when a component unmounts.
Functionality
The hook adheres to the following rules:
- It reverts the title when the component unmounts, but only when
document.title
has the value used by the component - The hook listens to the changes of its given value (internally this counts as a new mounted title)
- When the title changes to an empty string, the hook reverts the title
- When multiple components with the same title get mounted in a row, the title only gets removed when all components have unmounted
- When three components get mounted with a title and the second in order unmounts, the title of the first component is saved in the third and loaded when the third component unmounts. Of course this mechanism works with any count of titled components.
- No state changes and unnecessary re-renders; components notify each other and share state via events and mutable refs
Installation
npm i @f1stnpm2/ratione-maxime-doloribus
oryarn add @f1stnpm2/ratione-maxime-doloribus
for Reactnpm i @jvllmr/solid-component-titles
oryarn add @jvllmr/solid-component-titles
for Solid
Demo
You can find a React demo here
React Code example
// with solid-js use import { createComponentTitle } from "@jvllmr/solid-component-titles"
import { useComponentTitle } from "@f1stnpm2/ratione-maxime-doloribus";
function MyLoadingComponent() {
// In solid-js () => string has to be passed
useComponentTitle("Loading...");
return <Loader />;
}
API Reference
useComponentTitle (React)
useComponentTitle hook API
function useComponentTitle(title: string): void;
createComponentTitle (Solid)
createComponentTitle hook API
function createComponentTitle(title: Accessor<string>): void;
DocumentTitle
DocumentTitle component API
function DocumentTitle(props: { title: string }): null;