# Using React Helmet to build `` content ## Installation and general usage See https://github.com/nfl/react-helmet for details. Run `yarn add react-helmet` in your `client` directory to add this package to your application. ## Example Here is what you need to do in order to configure your Rails application to work with **ReactHelmet**. Create generator function for server rendering like this: ```javascript export default (props, _railsContext) => { const componentHtml = renderToString(); const helmet = Helmet.renderStatic(); const renderedHtml = { componentHtml, title: helmet.title.toString(), }; return { renderedHtml }; }; ``` You can add more **helmet** properties to result, e.g. **meta**, **base** and so on. See https://github.com/nfl/react-helmet#server-usage. Use regular component or generator function for client-side: ```javascript export default (props, _railsContext) => ( ); ``` Put **ReactHelmet** component somewhere in your ``: ```javascript import { Helmet } from 'react-helmet'; const App = (props) => (
Custom page title ...
); export default App; ``` Register your generators for client and server sides: ```javascript import ReactHelmetApp from '../ReactHelmetClientApp'; ReactOnRails.register({ ReactHelmetApp }); ``` ```javascript import ReactHelmetApp from '../ReactHelmetServerApp'; ReactOnRails.register({ ReactHelmetApp }); ``` Now when the `react_component_hash` helper is called with **"ReactHelmetApp"** as a first argument it will return a hash instead of HTML string: ```ruby <% react_helmet_app = react_component_hash("ReactHelmetApp", prerender: true, props: { hello: "world" }, trace: true) %> <% content_for :title do %> <%= react_helmet_app['title'] %> <% end %> <%= react_helmet_app["componentHtml"] %> ``` So now we're able to insert received title tag to our application layout: ```ruby <%= yield(:title) if content_for?(:title) %> ``` Note: Use of `react_component` for this functionality is deprecated. Please use `react_component_hash` instead.