react-theme-context
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    react-theme-context

    Travis Build Status codecov npm version

    Provides theme context and hooks. Supports theme switching via CSS custom properties.

    Usage

    The following example uses TypeScript.

    • You only want to create a single theme context and reuse it throughout your application.
    • You can create as many themes as you want, so long as they implement the same interface.

    Themes

    At its simplest, a theme can store colors:

    export default interface Theme {
      errorColor: string
      anotherColor: string
    }

    Here's an example of a theme using this color:

    import Theme from 'models/Theme'
     
    const colors = {
      scarlet: '#ff2400',
      white: 'white',
    }
     
    const myTheme: Theme = {
      errorColor: colors.scarlet,
      anotherColor: colors.white,
    }
     
    export default myTheme

    You might also want to base a color off of another:

    class MyTheme implements Theme {
      public errorColor = colors.scarlet
      public get anotherColor() {
        return darken(this.errorColor, 0.2)
      }
    }
     
    export default new MyTheme()

    Setup

    Here's a contrived example of setting up an app with a couple of inline themes and creating a button to switch to the 2nd one.

    themeContext.tsx

    import ThemeContext from 'react-theme-context'
     
    const defaultTheme = { primaryColor: 'red' }
     
    export default new ThemeContext(defaultTheme)

    App.tsx

    import React, { FC } from 'react'
     
    import themeContext from './themeContext'
     
    const App: FC = () => {
      themeContext.useLayoutEffect()
      const [theme, setTheme] = themeContext.use()
      return (
        <div style={`background: ${themeContext.prop('primaryColor')}`}>
          <button
            onClick={() => {
              setTheme({ primaryColor: 'blue' })
            }}
          >
            {theme.primaryColor}
          </button>
        </div>
      )
    }
     
    export default App

    index.tsx

    import React from 'react'
    import ReactDOM from 'react-dom'
     
    import themeContext from './themeContext'
    import App from './App'
     
    const renderApp = () =>
      ReactDOM.render(
        <themeContext.Provider>
          <App />
        </themeContext.Provider>,
        document.getElementById('root'),
      )
     
    renderApp()

    ThemeContext API

    #Provider

    See: React Docs | Context Provider

    #prop(property: keyof Theme): string

    Converts property into CSS custom property syntax. In TypeScript, it also prevents you from using a theme property that is not defined.

    Example

    themeContext.prop('primaryColor')
    // 'var(--primary-color)'

    #useLayoutEffect(options = {})

    Returns: [T, Dispatch<SetStateAction<T>>]

    Sets theme properties as CSS custom properties on the provided options.element or the root documentElement by default. If the theme is updated, these props are updated too. This enables live theme switching!

    You can also add class names to the same element via options.classNames, which is a string[].

    See: React Hooks API Reference | useLayoutEffect

    #use()

    Returns: the result of React.useContext

    Available Scripts

    In the project directory, you can run:

    npm test

    Launches the [Jest][https://jestjs.io/] test runner in the interactive watch mode.

    For a coverage report, run npm test -- --coverage.

    npm run lint

    Runs ESLint.

    npm run commit

    Runs commitizen, prompting you to fill out any required commit fields at commit time.

    npm run build

    Builds the library for npm into the dist folder.

    Install

    npm i react-theme-context

    DownloadsWeekly Downloads

    4

    Version

    2.0.1

    License

    none

    Unpacked Size

    14.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • jedmao