Search
showing results for - "usecontext hook"
Jonathan
20 Oct 2017
1const themes = {
2  light: {
3    foreground: "#000000",
4    background: "#eeeeee"
5  },
6  dark: {
7    foreground: "#ffffff",
8    background: "#222222"
9  }
10};
11
12const ThemeContext = React.createContext(themes.light);
13
14function App() {
15  return (
16    <ThemeContext.Provider value={themes.dark}>
17      <Toolbar />
18    </ThemeContext.Provider>
19  );
20}
21
22function Toolbar(props) {
23  return (
24    <div>
25      <ThemedButton />
26    </div>
27  );
28}
29
30function ThemedButton() {
31  const theme = useContext(ThemeContext);
32  return (
33    <button style={{ background: theme.background, color: theme.foreground }}>
34      I am styled by theme context!
35    </button>
36  );
37}
source
similar questions
react usecontext examplesusecontext from localhostuseparams react hooksreact usecontext inside class componentsuselocation hookuse only dispatch from usecontextreact hook usefetchreact useref in useeffectauthentication state react contextcontext hookusefetch custom hook for reactuseref in react hooksreact uselocation 28 29
queries leading to this page
usecontext hook reactwhat does the usecontext hook return when called 3fusecontext hook in react jsreact hook usecontext is called in functioncreatecontext hookusecontext hookuse context hook and createcontextusecontext inside custom hookusecontext react hooks 23usecontext hook and createcontextreact createcontext use custom hookusecontext hook in reactusecontext hook react examplereact usecontext examplesreact usecontext example 22usestate 28usecontext 28 22usecontext react hookswhat is usecontext hookusecontext reaact hookusecontext hook and createcontext hookusecontext hook exampleusecontext hook