@mazzard/react-meta
v1.0.0
Published
React component for handling of meta data
Downloads
3
Maintainers
Readme
#@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'))