@master/css.react

React hooks and components for Master CSS

Installation

npm install @master/css.react

Required @master/css^2

Preparation

Let's say ./src/master.js is the file where you manage the Master CSS.

import MasterCSS from '@master/css'
import config from './master.css'
export const css = new MasterCSS({ config })

Hooks

useScheme

Hook css.scheme and css.theme changes.

import { useScheme, useRendered } from '@master/css.react'
import { useCallback } from 'react'
import { css } from './master'

export default function ThemeButton() {
    const { scheme, setScheme, theme } = useScheme(css)
    const changeScheme = useCallback(({ target }) => {
        setScheme(target.value)
    }, [setScheme])
    const effected = useEffected()
    return (
        <button className="rel">
            {effected && theme}
            <select value={scheme} onChange={changeScheme} className="abs full opacity:0 cursor:pointer" >
                <option value="light">☀️ Light</option>
                <option value="dark">🌜 Dark</option>
                <option value="system">System</option>
            </select>
        </button>
    )
}

Use setScheme to change the theme scheme for Master CSS.

useEffected

Hook side effects for binding document, window, localStorage, etc.

import { useScheme, useEffected } from '@master/css.react'

export default function ThemeButton({ onChange, className }: any) {
    const effected = useEffected()
    return (
        {effected && localStorage.getItem('scheme')}
    )
}

Often used to prevent server-side use of the browser API result in a hydration error.

useBreakpoints 🚧

import { useBreakpoints } from '@master/css.react'
import { css } from './master'

export default function Home() {
    const at = useBreakpoints(css)
    return (
        <>
            {at('>=md') && '>=1024'}
            {at('<=md') && '<=1024'}
            {at('>md') && '>1024'}
            {at('<md') && '<1024'}
            {at('=md') && '=1024'}
        </>
    )
}