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.

``jsx
import * as React from "react";
import { directstyled, useDirectStyle } from "direct-styled";

function Example() {
const [style, setStyle] = useDirectStyle();

return (
style={style}
onMouseMove={evt =>
setStyle({
transform: translate(${evt.clientX}px, ${evt.clientY}px)
})
}
/>
);
}
`

Checkout a working demo on CodeSandbox!

Install

`bash
npm install --save direct-styled
`

or

`bash
yarn add direct-styled
`

Usage

$3

Just another HOC. Without the special style provided by useDirectStyle, no additional behavior is added.

`jsx
import { directstyled } from "direct-styled";

// use with shorthand
const x = ;
// ...or
const x = ;

// construct with a tag-name
const x = directstyled("div");

// construct with a component
const x = directstyled(MyButton);

// or with styled-components
const x = directstyled(styled.div);
`

$3

`jsx
import { useDirectStyle } from "direct-styled";

function Example() {
// pass style to a directstyled-component
// use setStyle to react to series of rapid changes, ie. mouse and scroll events
const [style, setStyle] = useDirectStyle();

return (
onMouseMove={evt =>
// Set new css-transform values, unburden the work of React
setStyle({
transform: translate(${evt.clientX}px, ${evt.clientY}px)
})
}
>
{/ Multiple directstyled-components can share the same style /}
style={{ position: "absolute", top: 0, left: 0, ...style }}
/>
/ Multiple directstyled-components can share the same style /}
style={{ position: "absolute", top: 50, left: 50, ...style }}
/>