logo

CSS React

React hooks for Master CSS

MIT License Latest Release Bundle Size Package Size Documentation Github Discord CI

Installation

npm install @master/css.react

@master/css requires >=2

Preparation

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

import config from './master.css'
import { init } from '@master/css'
export const css = init(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 { below, above, greater, less, equal } = useBreakpoints(css)
    return (
        <>
            {above.md && '>=1024'}
            {below.md && '<=1024'}
            {greater.md && '>1024'}
            {less.md && '<1024'}
            {equal.md && '=1024'}
        </>
    )
}

Related

GitHub

View Github