diff --git a/README.md b/README.md index ff91079..2fd9d1c 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_734 TILs and counting..._ +_735 TILs and counting..._ --- @@ -514,6 +514,7 @@ _734 TILs and counting..._ - [Use withRouter To Pass Down React-Router History](react/use-withrouter-to-pass-down-react-router-history.md) - [Visually Select A React Element For Inspection](react/visually-select-a-react-element-for-inspection.md) - [Who Is Your Favorite Child?](react/who-is-your-favorite-child.md) +- [Wrap The Root Of A Gatsby App In A Component](react/wrap-the-root-of-a-gatsby-app-in-a-component.md) ### React Native diff --git a/react/wrap-the-root-of-a-gatsby-app-in-a-component.md b/react/wrap-the-root-of-a-gatsby-app-in-a-component.md new file mode 100644 index 0000000..2358b12 --- /dev/null +++ b/react/wrap-the-root-of-a-gatsby-app-in-a-component.md @@ -0,0 +1,32 @@ +# Wrap The Root Of A Gatsby App In A Component + +Each component that is defined in the `pages` directory of a +[Gatsby](https://www.gatsbyjs.org/) app will be generated into a separate +static page. Each of these pages is meant to stand on its own. Nevertheless, +there is still a behind-the-scenes root component above all of these pages. +There are cases where'd you like to wrap this root component with some other +component, such as a Redux `Provider`. + +This can be done using the `wrapRootElement` hook from the Browser API in +the `gatsby-browser.js` file. + +```javascript +// gatsby-browser.js +import React from 'react'; +import { Provider } from 'react-redux'; + +import store from './src/store'; + +export const wrapRootElement = ({ element }) => { + return ( + {element} + ); +} +``` + +Each page and each component in your Gatsby app will now be downstream from +a Redux provider meaning that they can connect to the Redux store as needed. +You can use this technique for any top-level component that need to be +wrapped around the entire app. + +[source](https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement)