direct-styled
Very tiny (2kb) lib built with Typescript containing a HOC and a hook which enables you to set rapid changing styles without causing React-re-render.
Read my blog post for more background regarding the how's and why's.
Advice: Try to update styles with normal React state first! React is very fast, and most of the time React.useState
will suffice.
import * as React from "react";import directstyled useDirectStyle from "direct-styled"; { const style setStyle = ; return <directstyled.div = = /> ;}
Checkout a working demo on CodeSandbox!
Install
npm install --save direct-styled
or
yarn add direct-styled
Usage
directstyled
Just another HOC. Without the special style provided by useDirectStyle
, no additional behavior is added.
import directstyled from "direct-styled"; // use with shorthandconst x = <directstyled.div />;// ...orconst x = <directstyled.article />; // construct with a tag-nameconst x = ; // construct with a componentconst x = ; // or with styled-componentsconst x = ;
useDirectStyle
import useDirectStyle from "direct-styled"; { // pass `style` to a directstyled-component // use `setStyle` to react to series of rapid changes, ie. mouse and scroll events const style setStyle = ; return <div = > /* Multiple directstyled-components can share the same `style` */ <directstyled.div = /> /* Multiple directstyled-components can share the same `style` */} <directstyled.div = /> </div> ;}
License
MIT © everweij