manage document head like a pro
$ npm install --save head-tags
import headTags from 'head-tags'
const options = {
// we use this to get existing tags
identifyAttribute: 'head-manager'
}
const head = headTags({
title: 'foo',
titleTemplate(title) {
return `${title} - My Website`
},
style: [
{cssText: 'body {color: #666;}'}
],
link: [
{href: './main.css', rel: 'stylesheet'}
],
meta: [
{charset: 'utf-8'}
]
}, options)
// get the html string
head.title.toString() // <title>foo - My Website</title>
// reflect it in dom
head.title.mount() // document.title changed!
// reflect all tags in dom
head.mount()
// get string of all tags
head.toString()
// <title>...</title>
// <style head-manager>...</style>
// ...
Supported tags:
title
is special, its value should be a string.
And we accept an optional titleTemplate
property to customize the output.
use cssText
property to set content of style
tag.
For other tags use innerHTML
to set content.
All properties other than cssText
and innerHTML
will be attributes of the tag.
Set the value of property to undefined
to omit attribute value.
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature