MENU


Passing an Object


RESETRUNFULL
<!DOCTYPE html><html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div></div>
    <script type="text/babel">
      const themes = {
        light: { foreground: "#000000", background: "#eeeeee" },
        dark: { foreground: "#ffffff", background: "#222222" }
      };
      const ThemeContext = React.createContext(themes.light);
      function App() {
        return (
          <ThemeContext.Provider value={themes.dark}>
            <Toolbar />
          </ThemeContext.Provider>
        );
      }
      function Toolbar(props) {
        return (
          <div>
            <ThemedButton />
          </div>
        );
      }
      function ThemedButton() {
        const theme = React.useContext(ThemeContext);
        return (
          <button style={{ background: theme.background, color: theme.foreground }}>
            I am styled by theme context!
          </button>
        );
      }
      const root = ReactDOM.createRoot(document.querySelector("div"));
      root.render(<App/>);
    </script>
  </body></html>