# @s-ui/react-head
> Populate the head element of your React app without hassle.
Features:
- Change the `` content by using React components.
- Add attributes to `` and `` tags.
## Installation
```sh
$ npm install @s-ui/react-head
```
## How to use
### Usage
Using `` component will allow you to define the tags inside the `` element. You could use two different ways: using the `children` of the component with the desired tags or using the props.
```js
import React from 'react'
import Head, { HeadProvider } from '@s-ui/react-head'
const App = () => (
{ /* Using tags directly */ }
Title of page
{ /* Using props */ }
)
```
**Important ⚠️**: You can't mix both of them in order to define `link`, `meta` and `title` tags. The children will have precedence and overwrite if you try to combine both. However, you could still use `htmlAttributes` and `bodyAttributes` with the `children` approach.
### Server Side Setup
```js
import {HeadProvider} from '@s-ui/react-head'
import {renderHeadTagsToString} from '@s-ui/react-head/lib/server'
import {renderToString} from 'react-dom/server'
// headTags will be mutated, so you need to create a new variable
// for each request to avoid collisions
const headTags = []
const app = renderToString(
)
// use headTags to get the content of ``
// and string attributes for `` and ``
const {
bodyAttributes,
headString,
htmlAttributes,
} = renderHeadTagsToString(headTags)
res.send(`
${headContent}