@mazzard/react-meta

#@mazzard/react-meta

Install

npm i @mazzard/react-meta

Meta helps you control title and description of pages.

import React from 'react'
import ReactDom from 'react-dom'
import Link from '@mazzard/react-link'
import Router from '@mazzard/react-router/Router'
import Route from '@mazzard/react-router/Route'
import Meta from '@mazzard/react-meta'

class Test extends React.Component {
  render () {
    return (
      <>
        <Link>
          Home
        </Link>
        <Router>
          <Route match='/'>
            <Meta title='Home' description='Home description' />
            <hr />
            <Link to='/test1'>
              test1
            </Link>
            {' | '}
            <Link to='/test2'>
              test2
            </Link>
          </Route>
          <Route>
            <Meta title='Home | '>
              <Route match='/test1'>
                <Meta title='Test1' description='Test1 description' />
              </Route>
              <Route match='/test2'>
                <Meta title='Test2' description='Test2 description' />
              </Route>
            </Meta>
          </Route>
        </Router>
      </>
    )
  }
}

ReactDom.render(<Test />, document.getElementById('root'))

clearTitle and clearDescription

You may clear parent's title and description

import React from 'react'
import ReactDom from 'react-dom'
import Link from '@mazzard/react-link'
import Router from '@mazzard/react-router/Router'
import Route from '@mazzard/react-router/Route'
import Meta from '@mazzard/react-meta'

class Test extends React.Component {
  render () {
    return (
      <>
        <Link>
          Home
        </Link>
        <Router>
          <Route match='/'>
            <Meta title='Home' description='Home description' />
            <hr />
            <Link to='/test1'>
              test1
            </Link>
            {' | '}
            <Link to='/test2'>
              test2
            </Link>
          </Route>
          <Route>
            <Meta title='Home | '>
              <Route match='/test1'>
                <Meta title='Test1' description='Test1 description' />
              </Route>
              <Route match='/test2'>
                <Meta title='Test2' clearTitle description='Test2 description' />
              </Route>
            </Meta>
          </Route>
        </Router>
      </>
    )
  }
}

ReactDom.render(<Test />, document.getElementById('root'))