{"id":7537,"date":"2019-11-01T22:42:39","date_gmt":"2019-11-01T22:42:39","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7537"},"modified":"2019-11-01T22:45:08","modified_gmt":"2019-11-01T22:45:08","slug":"react-context","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/react-context\/","title":{"rendered":"React context (developing a ThemeProvider)"},"content":{"rendered":"

I’ve been looking into theming a React project and whilst I ultimately intended to use the theming capabilities within material-ui I was interested in how I might write our own.<\/p>\n

We’re going to be using React context<\/a>.<\/p>\n

Let’s start by creating a theme.ts file which will include our “base” theme style<\/p>\n

\r\nexport const theme = {\r\n  button: {\r\n    backgroundColor: "white",\r\n    borderColor: "red",\r\n    color: "blue",\r\n    borderWidth: "2px",\r\n    borderStyle: "solid",\r\n    padding: "10px",\r\n    fontSize: "24px",\r\n  }\r\n};\r\n<\/pre>\n
In the above code we created a button property which obviously defines our (rather horrible) default button style. Now we need some way to apply this theme (and any new version of our theme) to our application. <\/p>\n
Hence we create a ThemeProvider (ThemeProvider.tsx in my case), which looks like this<\/p>\n
\r\nimport React from "react";\r\nimport { theme } from "..\/theme";\r\n\r\nexport const ThemeContext = React.createContext(theme);\r\n\r\nexport function ThemeProvider(props: any) {\r\n  return (\r\n    <ThemeContext.Provider value={props.theme}>\r\n      {props.children}\r\n    <\/ThemeContext.Provider>\r\n  );\r\n}\r\n<\/pre>\n
In this case, we create a React context, and assign a default value to it (in the shape of our base theme). The ThemeProvider function is then used to wrap our application supplying the theme to all components that wish to use it. So here’s an example of the ThemeProvider in use (in the App.tsx)<\/p>\n
\r\nimport React from 'react';\r\nimport { ThemeProvider } from '.\/components\/ThemeProvider';\r\nimport { Button } from '.\/components\/Button';\r\nimport { myTheme } from '.\/myTheme';\r\n\r\nconst App: React.FC = () => {\r\n  return (\r\n    <ThemeProvider theme={myTheme}>\r\n      <div className="App">\r\n        <Button>Themed Button<\/Button>\r\n      <\/div>\r\n    <\/ThemeProvider>\r\n  );\r\n}\r\n\r\nexport default App;\r\n<\/pre>\n
You’ll notice we’ve also taken this opportunity to supply our overridden theme (with a slightly nicer button style) which is shown below (myTheme.ts)<\/p>\n
\r\nexport const myTheme = {\r\n  button: {\r\n    backgroundColor: "green",\r\n    color: "white",\r\n    borderWidth: "2px",\r\n    borderStyle: "solid",\r\n    padding: "10px",\r\n    fontSize: "24px",\r\n  }\r\n};\r\n<\/pre>\n
As you can see from our App.tsx code, we’re using a Button component, so let’s look at that code now (Button.tsx)<\/p>\n
\r\nimport React from "react";\r\nimport { ThemeContext } from ".\/ThemeProvider";\r\n\r\nexport const Button = (props: any) => (\r\n  <ThemeContext.Consumer>\r\n    {theme => (\r\n      <button style={theme.button} {...props}>\r\n        {props.children}\r\n      <\/button>\r\n    )}\r\n  <\/ThemeContext.Consumer>\r\n);\r\n<\/pre>\n
In this code we consume the React context we created via the ThemeProvider file and apply the style to the button, also passing through any props to the button.<\/p>\n
Now if you were to run this application the button will be displayed with our new theme (a nice green background button). If you change the App.tsx theme property to the default “base” theme, then we our default style.<\/p>\n","protected":false},"excerpt":{"rendered":"
I’ve been looking into theming a React project and whilst I ultimately intended to use the theming capabilities within material-ui I was interested in how I might write our own. We’re going to be using React context. Let’s start by creating a theme.ts file which will include our “base” theme style export const theme = […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[243],"tags":[],"class_list":["post-7537","post","type-post","status-publish","format-standard","hentry","category-react"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7537"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7537\/revisions"}],"predecessor-version":[{"id":7568,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7537\/revisions\/7568"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}