@master/css.react NPM

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'}
        </>
    )
}

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

react hooks use css mastercss

@master/css-runtime

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

2 days ago

1 day ago

2 days ago

7 days ago

10 days ago

13 days ago

14 days ago

15 days ago

15 days ago

17 days ago

17 days ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

10 months ago

10 months ago

10 months ago

6 months ago

9 months ago

6 months ago

9 months ago

6 months ago

9 months ago

6 months ago

6 months ago

10 months ago

10 months ago

10 months ago

10 months ago

5 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

1 year ago

12 months ago

12 months 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

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

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

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

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

@master/css.react v2.0.0-beta.84

On this page

Installation

Preparation

Hooks

`useScheme`

`useRendered`

`useBreakpoints` 🚧

Related

On this page

Installation

Preparation

Hooks

useScheme

useRendered

useBreakpoints 🚧

Related

`useScheme`

`useRendered`

`useBreakpoints` 🚧