{"componentChunkName":"component---src-templates-blog-post-template-js","path":"/2018/09/08/react-context-api/","result":{"data":{"mdx":{"id":"63186e4b-d541-5997-8218-7d51482e6451","frontmatter":{"title":"Using the React Context API  -  getting started","date":"2018 September 8th","cover":{"id":"b4638027-47d8-5230-bff8-393a20b1a7eb","publicURL":"/static/cover-73a60b55ba628a321c1831970ef9f00c.jpg"}},"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-09-08T00:00:00.000Z\",\n \"title\": \"Using the React Context API  -  getting started\",\n \"tags\": [\"information\", \"learning\", \"guide\", \"getting started\", \"react\", \"api\", \"styled-components\", \"css-in-js\"],\n \"published\": true,\n \"cover\": \"./cover.jpg\",\n \"coverCredit\": \"Photo by John Michael Thomson on Unsplash\"\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, \"Let\\u2019s use the React Context API to change theme in an app!\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://thepracticaldev.s3.amazonaws.com/i/zmp2k4r128poj1gsws61.gif\",\n \"alt\": null\n }))), mdx(\"h2\", {\n \"id\": \"but-first-some-context-🤣\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#but-first-some-context-%F0%9F%A4%A3\",\n \"aria-label\": \"but first some context 🤣 permalink\",\n \"className\": \"anchor-toc 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 })))), \"But first, some \", mdx(\"strong\", {\n parentName: \"h2\"\n }, \"context\"), \"! \\uD83E\\uDD23\"), mdx(\"p\", null, \"Ok terrible puns aside let\\u2019s have a look at what the React Context API\\nis for and what it does. There\\u2019s a great one liner from the \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://reactjs.org/docs/context.html\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"React\\ndocs\"), \"\\u2026\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Context provides a way to pass data through the component tree\\nwithout having to pass props down manually at every level.\")), mdx(\"p\", null, \"Or in other words, you can use the React Context API to avoid \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://blog.kentcdodds.com/prop-drilling-bb62e02cb691\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"prop\\ndrilling\"), \" if you need more detail on the concept then please do check\\nout the links provided.\"), mdx(\"p\", null, \"I\\u2019ve previously gone over implementing the React Context API in \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://thelocalhost.blog\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"my\\nGatsby blog\"), \" which I documented as I did it; you can see \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://thelocalhost.blog/react-context-api-with-gatsby\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"how that\\nwent here\"), \".\"), mdx(\"blockquote\", null, mdx(\"h3\", _extends({\n parentName: \"blockquote\"\n }, {\n \"id\": \"explain-the-context-api-to-me\",\n \"style\": {\n \"position\": \"relative\"\n }\n }), mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#explain-the-context-api-to-me\",\n \"aria-label\": \"explain the context api to me permalink\",\n \"className\": \"anchor-toc 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 })))), \"Explain the Context API to me.\"), mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"A great resource on explaining the API can be found from\\n\", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://twitter.com/leighchalliday\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"@leighchalliday\"), \" with a \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.youtube.com/watch?v=yzQ_XulhQFw\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"great usecase\"), \" on the subject.\")), mdx(\"h2\", {\n \"id\": \"what-were-doing\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#what-were-doing\",\n \"aria-label\": \"what were doing permalink\",\n \"className\": \"anchor-toc 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 })))), \"What we\\u2019re doing\\u2026\"), mdx(\"p\", null, \"For this post we\\u2019re going to extend the example we created for\\n\", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://medium.com/styled-components/styled-components-getting-started-c9818acbcbbd\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"styled-components getting started\"), \" as it has the majority of the code\\nwe\\u2019ll need to get started with the React Context API.\"), mdx(\"p\", null, \"We\\u2019re going to extend that example to manage the theme state of the\\nexample application.\"), mdx(\"p\", null, \"So in summary:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Scaffold out basic CreateReact App\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use styled-components \\uD83D\\uDC85 for styling\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Add themes to switch between with the React Context API\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use the React Context API!\")), mdx(\"h2\", {\n \"id\": \"what-well-need\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#what-well-need\",\n \"aria-label\": \"what well need permalink\",\n \"className\": \"anchor-toc 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 })))), \"What we\\u2019ll need\\u2026\"), mdx(\"p\", null, \"All we\\u2019ll be needing is an internet connection and a modern web\\nbrowser! Because we\\u2019re going to do all of this online in the awesome\\n\", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://codesandbox.io\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"CodeSandbox\"), \"!\"), mdx(\"p\", null, \"If you have a GitHub account or not, CodeSandbox will let you get\\nstarted \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://codesandbox.io/s/new\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"coding straight away\"), \"!\"), mdx(\"h3\", {\n \"id\": \"versions\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#versions\",\n \"aria-label\": \"versions permalink\",\n \"className\": \"anchor-toc 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 })))), \"Versions:\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"This guide is being used with the following dependency versions.\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"react: 16.4.2\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"react-dom: 16.4.2\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"react-scripts: 1.1.4\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"styled-components: 3.4.5\")), mdx(\"hr\", null), mdx(\"h2\", {\n \"id\": \"lets-start\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#lets-start\",\n \"aria-label\": \"lets start permalink\",\n \"className\": \"anchor-toc 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 start\"), mdx(\"p\", null, \"So let\\u2019s go over theming the basic create react app again, this time\\ninstead of adding state into to the component we will use the React\\nContext API to manage the state for us. There will be people that will\\nargue that this is a bit overkill for a theme switch but it is given\\nas an example of \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://reactjs.org/docs/context.html#when-to-use-context\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"when to use the Context API\"), \" in the React\\ndocumentation so I will let you decide on the validity of that point.\\nFor this example, I hope it will give you a clearer picture of how to\\nuse the Context API in an application.\"), mdx(\"h3\", {\n \"id\": \"dependencies\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#dependencies\",\n \"aria-label\": \"dependencies permalink\",\n \"className\": \"anchor-toc 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 })))), \"Dependencies\"), mdx(\"p\", null, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://codesandbox.io/s/new\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"Open a React CodeSandbox\"), \" and add \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"styled-components\"), \" as a\\ndependency:\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://thepracticaldev.s3.amazonaws.com/i/d49drafvtvz3ws2br9vs.gif\",\n \"alt\": null\n }))), mdx(\"h3\", {\n \"id\": \"file-structure\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#file-structure\",\n \"aria-label\": \"file structure permalink\",\n \"className\": \"anchor-toc 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 })))), \"File structure\"), mdx(\"p\", null, \"Another area for \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://en.wiktionary.org/wiki/bikeshedding\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"bikeshedding\"), \" is file structure, in this scenario\\nwe\\u2019re adding folders for \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"components\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"contexts\"), \" and the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \"\\nplease feel free to structure your files how you see fit, this is how\\nwe\\u2019re going to do it for this example \\u2764\\uFE0F\"), mdx(\"p\", null, \"Add the directories into the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src\"), \" folder so we can add in some\\ncomponents, the file structure should look something like this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-bash\"\n }), \"context-demo/\\n\\u251C\\u2500 public/\\n\\u251C\\u2500 src/\\n\\u2502 \\u2514\\u2500 components/\\n\\u2502 \\u2514\\u2500 contexts/\\n\\u2502 \\u2514\\u2500 theme/\\n\\u2514\\u2500 package.json\\n\")), mdx(\"h2\", {\n \"id\": \"scaffold-out-a-basic-create-react-app\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#scaffold-out-a-basic-create-react-app\",\n \"aria-label\": \"scaffold out a basic create react app permalink\",\n \"className\": \"anchor-toc 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 })))), \"Scaffold out a basic Create React App\"), mdx(\"p\", null, \"Ok, so, what we\\u2019re going to do is add in an \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" component to the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"components\"), \" folder then use that in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src/index.js\"), \" file.\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" component can be a \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://reactjs.org/docs/state-and-lifecycle.html#the-data-flows-down\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"stateless functional component\"), \" as\\nfor this example as we\\u2019re going to be handling state with the Context\\nAPI.\"), mdx(\"p\", null, \"Here you can see my sketchy typing as I create the directories and add\\nin the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" component.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://thepracticaldev.s3.amazonaws.com/i/oyxpggt00q754iv1azp0.gif\",\n \"alt\": null\n }))), mdx(\"p\", null, \"We can then remove the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"style.css\"), \" file and reference in\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src/index.js\"), \" as we\\u2019re going to be styling with styled-components \\uD83D\\uDC85\\nand then use our \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" component:\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://thepracticaldev.s3.amazonaws.com/i/yyne3q36jc0zca2ld89u.gif\",\n \"alt\": null\n }))), mdx(\"p\", null, \"Ok, so the reason why I have abstracted the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" component out of\\nthe \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src/index.js\"), \" file is so that when we come to using the Context\\nAPI we can add it to the highest level in our app, which is\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src/index.js\"), \".\"), mdx(\"h3\", {\n \"id\": \"what-about-the-rest\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#what-about-the-rest\",\n \"aria-label\": \"what about the rest permalink\",\n \"className\": \"anchor-toc 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 })))), \"What about the rest?\"), mdx(\"p\", null, \"So this isn\\u2019t really the Create React App, as we\\u2019re using CodeSandbox\\ninstead, I have gone over the basic styling used in the\\n\", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://medium.com/styled-components/styled-components-getting-started-c9818acbcbbd\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"styled-components getting started\"), \" post so it\\u2019s time to refer to that\\nto mimic the styles we need.\"), mdx(\"p\", null, \"That means what we\\u2019re going to do, rather than go into depth on the\\nstyling of each of the component parts that make up the basic Create\\nReact App appearance, we\\u2019re going to re-use components, so there\\u2019s\\ngoing to be a bit of copy pasting involved now.\"), mdx(\"p\", null, \"The Create React App boilerplate code has one file that we go over\\nstyling in the \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://medium.com/styled-components/styled-components-getting-started-c9818acbcbbd\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"styled-components getting started\"), \" post which is the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" file, the others are left or deleted, the basic style of\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" is:\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"App.css\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-css\"\n }), \".App {\\n text-align: center;\\n}\\n\\n.App-logo {\\n animation: App-logo-spin infinite 20s linear;\\n height: 80px;\\n}\\n\\n.App-header {\\n background-color: #222;\\n height: 150px;\\n padding: 20px;\\n color: white;\\n}\\n\\n.App-title {\\n font-size: 1.5em;\\n}\\n\\n.App-intro {\\n font-size: large;\\n}\\n\\n@keyframes App-logo-spin {\\n from {\\n transform: rotate(0deg);\\n }\\n to {\\n transform: rotate(360deg);\\n }\\n}\\n\")), mdx(\"h2\", {\n \"id\": \"use-styled-components-for-styling\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#use-styled-components-for-styling\",\n \"aria-label\": \"use styled components for styling permalink\",\n \"className\": \"anchor-toc 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 })))), \"Use styled components for styling\"), mdx(\"p\", null, \"Now we\\u2019re going to recreate the styles from the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.css\"), \" file with\\nstyled-components, let\\u2019s list them out here and go through them:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-bash\"\n }), \"AppWrapper\\nAppHeader\\nAppTitle\\nrotate360\\nAppLogo\\n# We're adding our own styles for\\nAppIntro\\nUnderline\\nStyledHyperLink\\nButton\\n\")), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"AppWrapper\"), \" is the top level wrapper which in a larger component\\ncould be used for layout with CSS Grid or Flexbox, in our case we\\u2019re\\ngoing to align the text center.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://thepracticaldev.s3.amazonaws.com/i/uc08zkkf4ay1hq8pkt3w.gif\",\n \"alt\": null\n }))), mdx(\"p\", null, \"Straightforward enough, right? Now the majority of the rest of the\\ncomponents will use the styled-components \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.styled-components.com/docs/advanced#theming\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"ThemeProvider\")), \" which is\\nwhat we\\u2019re going to pass our theme to from the Context API.\"), mdx(\"h2\", {\n \"id\": \"add-themes-to-switch-between-with-the-react-context-api\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#add-themes-to-switch-between-with-the-react-context-api\",\n \"aria-label\": \"add themes to switch between with the react context api permalink\",\n \"className\": \"anchor-toc 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 })))), \"Add themes to switch between with the React Context API\"), mdx(\"p\", null, \"Ok, we need to define some themes to pass to the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeProvider\"), \",\\nwe\\u2019re going to define several theme aspects we want to change, these\\nare going to be:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"primary; // colour\\nsecondary; // colour\\ndanger; // colour\\nfontHeader; // font\\nfontBody; // font\\n\")), mdx(\"p\", null, \"Create a file to contain the theme object in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \" directory and\\ncall it \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"globalStyle.js\"), \" and add in the following:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"import { injectGlobal } from 'styled-components';\\n\\nexport const themes = {\\n theme1: {\\n primary: '#ff0198',\\n secondary: '#01c1d6',\\n danger: '#e50000',\\n fontHeader: 'Old Standard TT, sans, sans-serif',\\n fontBody: 'Nunito, sans-serif',\\n },\\n\\n theme2: {\\n primary: '#6e27c5',\\n secondary: '#ffb617',\\n danger: '#ff1919',\\n fontHeader: 'Enriqueta, sans-serif',\\n fontBody: 'Exo 2, sans, sans-serif',\\n },\\n\\n theme3: {\\n primary: '#f16623',\\n secondary: '#2e2e86',\\n danger: '#cc0000',\\n fontHeader: 'Kaushan Script, sans, sans-serif',\\n fontBody: 'Headland One, sans-serif',\\n },\\n};\\n\\ninjectGlobal`\\n @import url('\\n https://fonts.googleapis.com/css?family=\\n Old+Standard+TT:400,700|\\n Nunito:400,700'|\\n Enriqueta:400,700|\\n Exo+2:400,700|\\n Kaushan+Script:400,700|\\n Headland+One:400,700|\\n ');\\n\\n body {\\n padding: 0;\\n margin: 0;\\n }\\n`;\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://thepracticaldev.s3.amazonaws.com/i/qnxbteccbaw92jbwsq9c.gif\",\n \"alt\": null\n }))), mdx(\"p\", null, \"Ok, so nothing really happening there apart from setting up the styles\\nfor use later.\"), mdx(\"p\", null, \"You will notice that \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"injectGlobal\"), \" is being used here, this is where\\nwe\\u2019re setting the fonts for use throughout the app, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"injectGlobal\"), \"\\n\", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://stackoverflow.com/a/42899789/1138354\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"should be used once\"), \" in an app to set global styles like this.\"), mdx(\"p\", null, \"Onwards! Let us now focus on getting the basic app styles into the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" component. We can now start using the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeProvider\"), \" in\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \". To do this, for now, to get some visual feedback we\\u2019re going\\nto apply one of the themes from the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"themes\"), \" object in\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"globalStyle.js\"), \" this is so, as we are adding in components we can see\\nthe theme being applied.\"), mdx(\"p\", null, \"We can do this now with the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"AppHeader\"), \" which is a styled div:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"const AppHeader = styled.div`\\n height: 12rem;\\n padding: 1rem;\\n color: ${({ theme }) => theme.dark};\\n background-color: ${({ theme }) => theme.primary};\\n`;\\n\")), mdx(\"p\", null, \"You will notice here that we\\u2019re beginning to use the\\nstyled-components, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \" props but, if we paste this code in now\\nthere won\\u2019t be any change until the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeProvider\"), \" is passed the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \" object so we\\u2019re going to wrap \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" with the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeProvider\"), \" component so that any component encapsulated by the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeProvider\"), \" is able to receive \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \" props.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://thepracticaldev.s3.amazonaws.com/i/nuyaw29uoex6qcluf8va.gif\",\n \"alt\": null\n }))), mdx(\"p\", null, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"AppTitle\"), \" is going to be a h1 so:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"const AppTitle = styled.h1`\\n font-family: ${({ theme }) => theme.fontHeader};\\n`;\\n\")), mdx(\"p\", null, \"For the spinning React logo we can use the asset used previously in\\nthe \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://codesandbox.io/s/x26q7l9vyq\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"styled-components getting started example\")), mdx(\"p\", null, \"We can add it in with the imports at the top of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" component\\nand add it into the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"AppLogo\"), \" styled component as an \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"img\"), \" tag:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"const logo = `https://user-images.githubusercontent.com/\\n 234708/37256552-32635a02-2554-11e8-8fe3-8ab5bd969d8e.png`;\\n\")), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"keyframes\"), \" helper will need to be imported alongside the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeProvider\"), \" for the animation on the react logo.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"const rotate360 = keyframes`\\n from { \\n transform: rotate(0deg); \\n }\\n to { \\n transform: rotate(360deg); \\n }\\n`;\\n\\nconst AppLogo = styled.img`\\n animation: ${rotate360} infinite 5s linear;\\n height: 80px;\\n &:hover {\\n animation: ${rotate360} infinite 1s linear;\\n }\\n`;\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://thepracticaldev.s3.amazonaws.com/i/pxe3fb5zqvprvtjthq5b.gif\",\n \"alt\": null\n }))), mdx(\"h3\", {\n \"id\": \"shared-components\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#shared-components\",\n \"aria-label\": \"shared components permalink\",\n \"className\": \"anchor-toc 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 })))), \"Shared components\"), mdx(\"p\", null, \"Shared components are covered in the \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://medium.com/styled-components/styled-components-getting-started-c9818acbcbbd\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"styled-components getting\\nstarted\"), \" guide if you need more information, for this example we\\u2019re\\ngoing to bring in the final couple of components as shared ones for\\nthe \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"StyledHyperLink\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Button\"), \" in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src/Shared.js\"), \" add the\\nfollowing:\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"src/Shared.js\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"import styled, { css } from 'styled-components';\\n\\nexport const Button = styled.button`\\n padding: 0.5rem 1rem;\\n margin: 0.5rem 1rem;\\n color: ${({ theme }) => theme.primary};\\n font-size: 1rem;\\n box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);\\n cursor: pointer;\\n border: 2px solid ${props => props.border};\\n background-color: Transparent;\\n text-transform: uppercase;\\n border-radius: 4px;\\n transition: all 0.1s;\\n &:hover {\\n transform: translateY(1px);\\n box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);\\n }\\n ${props =>\\n props.primary &&\\n css`\\n background: ${({ theme }) => theme.primary};\\n border: 2px solid ${({ theme }) => theme.primary};\\n color: white;\\n `};\\n ${props =>\\n props.danger &&\\n css`\\n background: ${({ theme }) => theme.danger};\\n border: 2px solid ${({ theme }) => theme.danger};\\n color: white;\\n `};\\n &:hover {\\n transform: translateY(2px);\\n box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);\\n }\\n`;\\n\\nexport const StyledHyperLink = styled.a`\\n cursor: pointer;\\n &:visited,\\n &:active {\\n color: ${({ theme }) => theme.primary};\\n }\\n &:hover {\\n color: ${({ theme }) => theme.secondary};\\n }\\n color: ${({ theme }) => theme.primary};\\n`;\\n\")), mdx(\"p\", null, \"Then import the components like any other:\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://thepracticaldev.s3.amazonaws.com/i/ipi1kdmy83ieiw6sppog.gif\",\n \"alt\": null\n }))), mdx(\"p\", null, \"The last three components for now, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"AppIntro\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Underline\"), \" and\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"StyledHyperLink\"), \":\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"const AppIntro = styled.p`\\n color: ${({ theme }) => theme.dark};\\n font-size: large;\\n code {\\n font-size: 1.3rem;\\n }\\n font-family: ${({ theme }) => theme.fontBody};\\n`;\\n\\nconst Underline = styled.span`\\n border-bottom: 4px solid ${({ theme }) => theme.secondary};\\n`;\\n\\nconst StyledHyperLink = SHL.extend`\\n text-decoration: none;\\n font-family: ${({ theme }) => theme.fontBody};\\n color: ${({ theme }) => theme.fontDark};\\n`;\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://thepracticaldev.s3.amazonaws.com/i/smm6hpg2w71sxm6nf3ln.gif\",\n \"alt\": null\n }))), mdx(\"p\", null, \"Add them in under the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"AppLogo\"), \" styled component and then we can add\\nthe rest of the components into the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App\"), \" function \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"return\"), \", so, ready\\nfor another \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"#\",\n \"title\": \"Copy Paste! yes 🙃\"\n }), \"copy pasta\"), \"? Here:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"\\n Bootstrapped with{' '}\\n \\n \\n \\n create-react-app\\n \\n \\n .\\n\\n\\n Components styled with{' '}\\n \\n \\n \\n styled-components\\n \\n \\n {' '}\\n \\n \\uD83D\\uDC85\\n \\n\\n\\n Fonts picked with{' '}\\n \\n \\n \\n fontjoy.com\\n \\n \\n \\n\\n\\n\\n\\n\")), mdx(\"p\", null, \"Sorry for the code wall! Right paste that in under the closing\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" tag and we should have the base of what we\\u2019re going to\\ntheme!\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://thepracticaldev.s3.amazonaws.com/i/zfcnihvmyvb9my5dn11x.gif\",\n \"alt\": null\n }))), mdx(\"p\", null, \"Ok? How\\u2019s it looking?\"), mdx(\"p\", null, \"Now we have a basic React app that uses styled-components!\"), mdx(\"h2\", {\n \"id\": \"use-the-react-context-api\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h2\"\n }, {\n \"href\": \"#use-the-react-context-api\",\n \"aria-label\": \"use the react context api permalink\",\n \"className\": \"anchor-toc 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 })))), \"Use the React Context API\"), mdx(\"p\", null, \"Now for the main event! Here we\\u2019re going to cover:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Making the theme context.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Using the context API with a component.\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Consuming the Context API in multiple components.\"))), mdx(\"p\", null, \"So, passing state needlessly through components is what we can use the\\nContext API to avoid. If we take a look at the \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://codesandbox.io/s/x26q7l9vyq\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"styled-components\\ngetting started example\"), \" we can see the state being managed in the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" component and the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"handleThemeChange\"), \" function has to be\\npassed to the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeSelect\"), \" component much the same way as any props\\nwould need to be passed down. That is a simplified example but it\\u2019s\\nquite easy to imagine if that component lived on a footer component or\\na menu item there would be several other components that would need to\\nhave the state passed through them that would not actually need that\\nstate or props. Make sense?\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"example\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \" {/* state begins here */}\\n
{/* through here */}\\n {/* and here */}\\n {/* to be used here */}\\n \\n
\\n