https://github.com/jvllmr/component-titles

Component-bound document titles for React.js and Solid.js
https://github.com/jvllmr/component-titles

dom-manipulation react-hooks reactjs solidjs solidjs-hooks

Last synced: 6 days ago
JSON representation

Component-bound document titles for React.js and Solid.js

• Host: GitHub
• URL: https://github.com/jvllmr/component-titles
• Owner: jvllmr
• License: mit
• Created: 2023-05-12T21:16:46.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-13T16:22:01.000Z (7 months ago)
• Last Synced: 2024-04-14T06:52:31.270Z (7 months ago)
• Topics: dom-manipulation, react-hooks, reactjs, solidjs, solidjs-hooks
• Language: TypeScript
• Homepage: https://jvllmr.github.io/component-titles/
• Size: 1.36 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Component-titles

[![Routine Checks](https://github.com/jvllmr/component-titles/actions/workflows/test.yml/badge.svg)](https://github.com/jvllmr/component-titles/actions/workflows/test.yml)

[![Codecov](https://img.shields.io/codecov/c/github/jvllmr/component-titles/main?style=plastic)](https://app.codecov.io/gh/jvllmr/component-titles/tree/main)

[![npm](https://img.shields.io/npm/dm/@jvllmr/component-titles-core?style=plastic)](https://www.npmjs.com/package/@jvllmr/component-titles-core)

[![Bundlesize React](https://deno.bundlejs.com/badge?q=@jvllmr/react-component-titles&treeshake=[*]&config={%22esbuild%22:{%22external%22:[%22react%22,%22react-dom%22]}}&badge=detailed)](https://bundlejs.com/?q=%40jvllmr%2Freact-component-titles&treeshake=%5B*%5D&config=%7B%22esbuild%22%3A%7B%22external%22%3A%5B%22react%22%2C%22react-dom%22%5D%7D%7D)

[![Bundlesize Solid](https://deno.bundlejs.com/badge?q=@jvllmr/solid-component-titles&treeshake=[*]&config={%22esbuild%22:{%22external%22:[%22solid-js%22]}}&badge=detailed)](https://bundlejs.com/?q=%40jvllmr%2Fsolid-component-titles&treeshake=%5B*%5D&config=%7B%22esbuild%22%3A%7B%22external%22%3A%5B%22solid-js%22%5D%7D%7D)

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 @jvllmr/react-component-titles` or `yarn add @jvllmr/react-component-titles` for React

- `npm i @jvllmr/solid-component-titles` or `yarn add @jvllmr/solid-component-titles` for Solid

## Demo

You can find a React demo [here](https://jvllmr.github.io/component-titles)

## React Code example

```typescript

// with solid-js use import { createComponentTitle } from "@jvllmr/solid-component-titles"

import { useComponentTitle } from "@jvllmr/react-component-titles";

function MyLoadingComponent() {

	// In solid-js () => string has to be passed

	useComponentTitle("Loading...");

	return ;

}

```

## API Reference

### useComponentTitle (React)

useComponentTitle hook API

```typescript

function useComponentTitle(title: string): void;

```

### createComponentTitle (Solid)

createComponentTitle hook API

```typescript

function createComponentTitle(title: Accessor): void;

```

### DocumentTitle

DocumentTitle component API

```typescript

function DocumentTitle(props: { title: string }): null;

```