@-ft/mode-react NPM

`mode-react` - Theme mode manager wrapper for React

React wrapper of dark/light theme mode manager for web

Usage

Generate mode.js using @-ft/mode-codegen package.

{
  "variableName": "__theme_mode"
}

Load mode.js BEFORE load react app.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ./mode.js is generated by @-ft/mode-codegen package -->
    <script src="./mode.js"></script>
    <script type="module" src="./index.tsx"></script>
  </head>
</html>

Then wrap your app with ModeContextProvider

import { ModeContextProvider, ModeContext } from '@-ft/mode-react';

function Provider({ children }) {
  return (
    <ModeContextProvider variableName="__theme_mode">
      {children}
    </ModeContextProvider>
  );
}

function ModeBar() {
  const { mode, setMode } = useContext(ModeContext);

  return (
    <Bar>
      Current theme mode is {mode}.
      <Select
        onChange={useCallback((mode) => setMode(mode), [setMode])}
      >
        {['system', 'light', 'dark']}
      </Select>
    </Bar>
  )
}

@everything-registry/sub-chunk-13

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago