react-composable-title

This is a reinterpretation of react-document-title with some added notions of "composability," inspired by React Router v4, and uses Redux under the hood.

Installation

npm install react-composable-title react redux react-redux

Example

import React from "react"
import { Match } from "react-router"
import { Title, TitleProvider } from "react-composable-title"

function App () {
    return (
        <TitleProvider>
            <Title title={(child) =>
                child ? `${child} | My Cool App` : "My Cool App"
            }/>
                <div>
                    <Match exactly pattern="/" component={Home} />
                    <Match pattern="/foo" component={Foo} />
                    <Match pattern="/bar/:id" component={Bar} />
                </div>
            </Title>
        </TitleProvider>
    )
}

function Home () {
    return <div>Home Page</div>
}

function Foo () {
    return <Title title="Foo">
        Foo page
    </Title>
}

function Bar ({ params }) {
    return <Title title={`Bar ${params.id}`}>
        Bar page
    </Title>
}

Results

• / : "My Cool App"
• /foo : "Foo | My Cool App"
• /bar/20 : "Bar 20 | My Cool App"