@master/css.react NPM | npm.io

Anonymous View

2.0.0-rc.67 • Published 1 year ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

1 year ago

On this page

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 rendered = useRendered()
    return (
        <button className="rel">
            {rendered && 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.

`useRendered`

Hook browser-side rendered.

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

export default function ThemeButton({ onChange, className }: any) {
    const rendered = useRendered()
    return (
        {rendered && 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

@master/css - A Virtual CSS language with enhanced syntax. ( ~13KB )
@master/style-element.react - Quickly create styled React elements with conditional class names. ~800B

component element react hooks use css mastercss class-name reactjs nextjs solidjs

@master/css-runtime

@infinitebrahmanuniverse/nolb-_mas @everything-registry/sub-chunk-584

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago