Nutritious Polygonal Meatball

    react-titled

    1.0.1 • Public • Published

    React-titled

    npm version npm downloads Build Status

    To fully control document.title in your React app.

    Features

    • requires React v16.3+ and its new context API
    • supports nesting, similar to react-router
    • updates document.title only when all react-titled instances are reconciled
    • flexible, it lets you to specify how different levels should be concatenated
    • no dependencies, ~100 lines of code

    Installation

    yarn add react react-dom react-titled

    Usage examples

    Basic

    import { Titled } from 'react-titled';
     
    <Titled title={() => 'Example.com'}>
      <h1>Welcome!</h1>
      <Titled title={title => `Homepage | ${title}`} />
    </Titled>;

    outputs

    Homepage | Example.com
    

    The deepest one wins

    import { Titled } from 'react-titled';
     
    <Titled title={() => 'Example.com'}>
      <Titled title={() => 'Homepage'} />
    </Titled>;

    outputs

    Homepage
    

    Subscribe to changes

    import { Titled } from 'react-titled';
     
    <Titled title={() => 'Example.com'} onChange={title => console.log(title)}>
      <h1>Welcome!</h1>
      <Titled title={title => `Homepage | ${title}`} />
    </Titled>;

    Run Examples

    git clone https://github.com/tajo/react-titled
    cd react-titled
    yarn install
    yarn build:examples
    open examples/index.html

    Contributions Welcome!

    git clone https://github.com/tajo/react-titled
    cd react-titled
    yarn install
    yarn build:examples --watch
    open examples/index.html

    Run Tests

    yarn test
    

    Author

    Vojtech Miksu 2018, miksu.cz, @vmiksu

    Install

    npm i react-titled

    DownloadsWeekly Downloads

    434

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    15.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar