# react-title-config

> Set document title based on current path and configuration schema

Latest version **1.0.1** (published 2019-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-title-config
pnpm add react-title-config
yarn add react-title-config
bun add react-title-config
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-05-08 |
| First published | 2019-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 27.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Alex Khismatulin |
| Maintainers | alexkhismatulin |
| Keywords | react, react-component, title, document.title, configuration, json |

## Links

- npm: https://www.npmjs.com/package/react-title-config
- Repository: https://github.com/alexkhismatulin/react-title-config
- Homepage: https://github.com/alexkhismatulin/react-title-config#readme
- Issues: https://github.com/alexkhismatulin/react-title-config/issues
- npm.io page: https://npm.io/package/react-title-config

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.1 (latest) — 2019-05-08
- 1.0.0 — 2019-05-08

## README

# react-title-config

> 


## Install

```bash
npm install react-title-config
```

## Usage

```jsx
import React from "react"
import TitleConfig from "react-title-config"

 // NOTE: it might be any router you want
import { BrowserRouter } from "react-router-dom"

// your main page or whatever
import MainPage from "/pages/Main"


const config = [
  {
    path: "/about",
    exact: true,
    skipPrefix: true,
    title: "About us",
  },
  {
    exact: true,
    path: ["/login", "/registration", "/reset-password"],
    title: "User actions",
  },
  {
    path: /^\/accounts\/[A-Za-z0-9]+/i,
    title: "Account page",
  },
  {
    path: pathname => pathname.length === "42",
    title: (params, descriptor, extras) => {
      const tab = params.queryParams.tab

      switch (tab) {
        case "one": return "The Hitchhiker's Guide to the Galaxy"
        case "two": return "The Restaurant at the End of the Universe"
        case "three": return "Life, the Universe and Everything"
        case "four": return "So Long, and Thanks for All the Fish"
        case "five": return "\tMostly Harmless"
        default: return "Not sure about this one"
      }
    },
  },
]

const defaultTitle = "No matches"
const titlePrefix = "Prefixed. "

const App = () => (
  <BrowserRouter>
    <>
      <TitleConfig
        config={titlesConfig}
        defaultTitle={defaultTitle}
        prefix={titlePrefix}
        customProperty="All extra props will be passed to title functtion as second parameter"
      />
      <MainPage/>
    </>
  </BrowserRouter>
)
```

## Props

### `config (required)` : `Array`

An array of title descriptors

### `defaultTitle` : `String` | `default: ''`

This title will be set in case there's no matches

### `prefix` : `String` | `default: ''`

A static string prefixing each title without `skipPrefix: true`

## Config Descriptor

### `path (required)` : `String | RegExp | PathFunction | Array<string | RegExp | PathFunction>`

A path to match with current pathname.

`PathFunction` accepts current pathname as parameter and returns whether the pathname matches: `(pathname: String) => Boolean`

### `title (required)` : `String | TitleFunction`

A title which will be rendered in case of match.  

`TitleFunction` accepts current location params, matched descriptor and object containing all extra props passed to component: `(params: PathParams, descriptor: ConfigDescriptor, extras: Object) => Boolean`

`PathParams` is an object of following shape:

```javascript
{
  hash: String,
  href: String,
  pathname: String,
  queryParams: Object
}
```

### `exact` : `Boolean` | `default: false`

Defines matching rule for plain strings. With `exact` set to true title will be set only in case of full match.

`path: "/accounts"` will match `/accounts/9379992` by default and it will match only `/accounts` in case of `exact: true`

### `skipPrefix` : `Boolean` | `default: false`

Current title will not be prefixes if `skipPrefix` is set to true

## License

MIT © [Alex Khismatulin](https://github.com/alexkhismatulin)

---
_Source: https://npm.io/package/react-title-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._