"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", p: "p", pre: "pre", ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "React Context is a great, builtin API for passing data from a parent component to any of\nits children. It’s designed to let you avoid having to use prop drilling and leaking\nimplementation details through intermediary components." }), "\n", _jsx(_components.p, { children: "Here’s a basic implementation for a color mode context with a custom context hook:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import React, { useContext } from 'react'\n\nconst ColorModeContext = React.createContext('light')\nexport const ColorModeProvider = ColorModeContext.Provider\n\nexport const useColorMode = () => {\n const colorMode = useContext(ColorModeContext)\n return colorMode\n}\n" }) }), "\n", _jsx(_components.p, { children: "Now, the library can be used like so:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// layout.js\nimport React from 'react'\nimport { ColorModeProvider } from './color-mode'\n\nexport default ({ children }) => {\n ;{children}\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Anywhere in your component tree you can now tap into the provider with the ", _jsx(_components.code, { children: "useColorMode" }), " hook:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import React from 'react'\nimport { useColorMode } from './color-mode'\n\nexport default (props) => {\n const colorMode = useColorMode()\n\n return

The color mode is: {colorMode}

\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["This is pretty powerful, but what if you want to add some sort of “setter” function for the color\nmode? You can do that by using React’s ", _jsx(_components.code, { children: "useState" }), " hook and adding an updater to your provider:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// color-mode.js\nimport React, { useContext } from 'react'\n\nconst ColorModeContext = React.createContext()\n\nexport const ColorModeProvider ({ children }) => {\n const [colorMode, setColorMode] = useState('light')\n\n return (\n \n {children}\n \n )\n}\n\nexport const useColorMode = () => {\n const { colorMode, update } = useContext(ColorModeContext)\n return { colorMode, update }\n}\n" }) }), "\n", _jsx(_components.p, { children: "With the updates to the provider, you can now pull in the updater as part of the hook." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import React from 'react'\nimport { useColorMode } from './color-mode'\n\nexport default (props) => {\n const { colorMode, update } = useColorMode()\n const otherColorMode = colorMode === 'light' ? 'dark' : 'light'\n\n return (\n

The color mode is: {colorMode}

\n {\n update(otherColorMode)\n }}\n >\n Set color mode to {otherColorMode}\n \n

\n )\n}\n" }) }), "\n", _jsx(_components.p, { children: "Just like that you have a clean API with vanilla React context and a custom hook.\nComponents that care about the color mode can leverage the hook without you needing\nto prop drill the information all over the place." }), "\n", _jsx(_components.p, { children: "This pattern is great for global settings in your app, theming, and even more complex\nfunctionality like authentication or shopping carts." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Using React context with a custom hook