{"componentChunkName":"component---src-templates-post-template-js","path":"/2018/05/22/react-context-api-with-gatsby/","result":{"data":{"mdx":{"frontmatter":{"title":"Use the React Context API with Gatsby","date":"2018 May 22nd"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"date\": \"2018-05-22T00:00:00.000Z\",\n \"title\": \"Use the React Context API with Gatsby\",\n \"tags\": [\"information\", \"learning\", \"guide\", \"gatsby\", \"api\"],\n \"excerpt\": \"\",\n \"published\": true\n};\n\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\n\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"p\", null, \"I\\u2019m a bit late to the party using the new \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://reactjs.org/docs/context.html\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"React Context API\"), \", I did\\nget to use it the other day at work, I also \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/spences10/settings/blob/35ba1ca3e9871c3ea6344ca2274ebbd327a18bed/globalVs.code-snippets#L74-L112\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"made a snippet\"), \" to\\nscaffold out a component for it.\"), mdx(\"p\", null, \"I had followed a couple of guides explaining how to use it and neither\\nof them as good as this great explanation of \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.youtube.com/watch?v=yzQ_XulhQFw\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"how to use it\"), \" from\\n\", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://twitter.com/leighchalliday\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"@leighchalliday\"), \", thank you Leigh \\uD83D\\uDE4F It\\u2019s a great use case which\\nhelped me understand how to use it.\"), mdx(\"p\", null, \"So, after doing this in a CRA project I decided to use it on one of my\\nGatsby projects. With Gatsby the layout is slightly different where\\nyou can have multiple layouts for differing sections of your app, so\\nthis lends well for passing context.\"), mdx(\"p\", null, \"One thing to bear in mind is that this is for my specific use case so\\nI\\u2019ll apologise upfront now if any of this is confusing, I\\u2019m trying to\\nget this documented to help me understand it too \\uD83D\\uDC4D\"), mdx(\"p\", null, \"With Gatsby if you want to use the React 16.3 then you will need to\\ninstall the Gatsby React next plugin:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"npm install gatsby-plugin-react-next\\n\")), mdx(\"p\", null, \"Gatsby uses React 16.2 I believe so you will need to use this plugin.\"), mdx(\"p\", null, \"Another thing you may need to do is:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-bash\"\n }), \"npm i react react-dom\\nnpm un react react-dom\\n\")), mdx(\"p\", null, \"This may be because I was trying to use it in an old project, I\\u2019ve had\\nto do this on three projects now as I was getting \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"createContext\"), \" is\\nnot a function errors until I did this.\"), mdx(\"p\", null, \"One other thing you may want to consider if it appears nothing is\\nworking try using the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"npm ci\"), \" command. This is the npm 6+ version of\\ndeleting your \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"node_modules\"), \" folder and reinstalling. \\uD83E\\uDD13\"), mdx(\"p\", null, \"So let\\u2019s go through one of my favourite use cases at the moment and\\nadd theming support to a Gatsby site and use the React context API to\\nmanage the theme.\"), mdx(\"p\", null, \"You can see how theme a React app without the React Context API in my\\n\", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://scottspence.me/styled-components-getting-started\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"styled-components \\uD83D\\uDC85 getting started\"), \" post.\"), mdx(\"p\", null, \"For illustration I\\u2019ll go over it here now, you add the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeProvider\"), \"\\nat the highest level in the application structure so that all\\ndescendants/children of the app can access it.\"), mdx(\"p\", null, \"I have already done this for my \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://scottspence.me\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"personal site\"), \" and now I\\u2019m going to\\ndo it \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"#\",\n \"title\": \"this site, đź‘€\"\n }), \"here\"), \" so let\\u2019s go through it together.\"), mdx(\"h2\", {\n \"id\": \"lets-make-a-component\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#lets-make-a-component\",\n \"aria-label\": \"lets make a component permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Let\\u2019s make a component!\"), mdx(\"p\", null, \"Ok, so everything in React is a component, that\\u2019s why I like it so\\nmuch - so let\\u2019s make a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"SomethingContext.js\"), \" component, as I want to\\ndo the \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"#\",\n \"title\": \"things being using the styled components `ThemeProvider`\"\n }), \"things\"), \" with the styled-components \\uD83D\\uDC85\"), mdx(\"p\", null, \"Let\\u2019s start by giving it an imaginative name:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"touch src/layouts/components/BlogThemeContext.js\\n\")), mdx(\"p\", null, \"There we go \\uD83D\\uDC4D\"), mdx(\"p\", null, \"Ok, the \\u2018things\\u2019 I want to do with the Context API are:\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"change the styled-components \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ThemeProvider\")), mdx(\"li\", {\n parentName: \"ol\"\n }, \"rotate the site hero patterns\")), mdx(\"p\", null, \"Now to scaffold out the context component, I have already mentioned\\nthe \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/spences10/settings/blob/71dc76fb8e11c176f4517431be57c021fb72411a/globalVs.code-snippets#L74-L111\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"VS Code snippet\"), \" for my own personal use which is the basic\\nstructure for the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Context\"), \" which is in two parts, a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Provider\"), \" and a\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Consumer\")), mdx(\"p\", null, \"Let\\u2019s create the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Context\"), \" and the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Consumer\"), \" in this component.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Using the snippet it should look something like this:\")), mdx(\"h6\", {\n \"id\": \"srclayoutscomponentsblogthemecontextjs\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h6\"\n }, {\n \"href\": \"#srclayoutscomponentsblogthemecontextjs\",\n \"aria-label\": \"srclayoutscomponentsblogthemecontextjs permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), mdx(\"inlineCode\", {\n parentName: \"h6\"\n }, \"src/layouts/components/BlogThemeContext.js\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"import React from 'react'\\n// Context is made up of two things\\n// Provider - Single as close to top level as possible\\n// Consumer - Multiple have multiple consumers\\nexport const BlogThemeContext = React.createContext()\\n\\nexport class BlogThemeProvider extends React.Component {\\n state = {\\n item1: 1,\\n item2: 2,\\n }\\n\\n // add function here\\n functionHere = () => {\\n this.setState({\\n item1: 2,\\n item2: 3,\\n })\\n }\\n render() {\\n return (\\n \\n {this.props.children}\\n \\n )\\n }\\n}\\n\")), mdx(\"p\", null, \"So the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"props\"), \" passed into the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" is the\\nstate and the methods contained in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"BlogThemeProvider\"), \" these can then\\nbe accessed throughout the app by using the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \".\"), mdx(\"p\", null, \"Now let\\u2019s add the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"BlogThemeProvider\"), \" at the top level of our app so\\nthat the state and functions of the provider can are accessible for\\nthe children of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"layout/index.js\"), \".\"), mdx(\"p\", null, \"This is what it looks like before adding the context provider, you\\u2019ll\\nnotice that the styled-components \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeProvider\"), \" is a top level\\ncomponent here.\"), mdx(\"h6\", {\n \"id\": \"srclayoutsindexjs\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h6\"\n }, {\n \"href\": \"#srclayoutsindexjs\",\n \"aria-label\": \"srclayoutsindexjs permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), mdx(\"inlineCode\", {\n parentName: \"h6\"\n }, \"src/layouts/index.js\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"const TemplateWrapper = ({ children }) => (\\n \\n \\n \\n
\\n
{children()}
\\n