react-stylesheet

installation

    npm install @grid23/react-stylesheet

usage

basic example

    import React from "react"
    import Stylesheet, {CSSRule} from "@grid23/react-stylesheet"

    function SomeComponent({children}){

        return (
          <Stylesheet>
            <CSSRule selector=".lorem" body="color:purple;" />
            <p className="lorem">ℓôřè₥ ïƥƨú₥</p>
          </Stylesheet>
        )
    }

basic scoped example

    import React, {useRef} from "react"
    import Stylesheet, {CSSRule} from "@grid23/react-stylesheet"

    function SomeComponent({children}){
        const scope = useRef()

        return (
          <Stylesheet>
            <CSSRule selector="span" body="color:purple;" scope={scope} />
            <p ref={scope}>
              <span>ℓôřè₥ ïƥƨú₥</span>
            </p>
            <span>ℓôřè₥ ïƥƨú₥</span>
          </Stylesheet>
        )
    }

selector as Ref

    import React, {useRef} from "react"
    import Stylesheet, {CSSRule} from "@grid23/react-stylesheet"

    function SomeComponent({children}){
        const pRef = useRef()

        return (
          <Stylesheet>
            <CSSRule selector={pRef} body="color:purple;" />
            <p ref={pRef}>ℓôřè₥ ïƥƨú₥</p>
          </Stylesheet>
        )
    }

mutating css properties

    import React, {useCallback, useEffect, useState}   from "react"
    import Stylesheet, {CSSRule} from "@grid23/react-stylesheet"

  // simple props mutation
    function SomeComponent({children, color}){

        return (
          <Stylesheet>
            <CSSRule selector=".lorem" body=`color:${color};` />
            <p className="lorem">ℓôřè₥ ïƥƨú₥</p>
          </Stylesheet>
        )
    }

  // access the underlying cssRule
    function SomeOtherComponent({children}){
        const [cssRule, setCssRule] = useState()
        const getRule = useCallback(cssRule =>
            setCssRule(cssRule)
        , [])

        const colors = ["black", "cyan", "purple"]
        useEffect(() => {
            const interval = setInterval(() => {
              const color = colors[Math.floor(Math.random()*colors.length)]
              cssRule && cssRule.style.setProperty("color", color)
            }, 1000)

            return () =>
              clearInterval(interval)
        })

        return (
          <Stylesheet>
            <CSSRule ref={getRule} selector=".lorem" />
            <p className="lorem">ℓôřè₥ ïƥƨú₥</p>
          </Stylesheet>
        )
    }