0.1.1 • Published 3 years ago
react-use-inline-style v0.1.1
react-use-inline-style
Installation
npm i react-use-inline-style
Usage
import { useCallback, useRef, useState } from 'react';
import useInlineStyle from 'react-use-inline-style';
const multiple = 10;
function MyComponent() {
const ref = useRef<HTMLDivElement>(null);
const [count, setCount] = useState(0);
const [getStyle, setStyle] = useInlineStyle(() => ({
width: 100,
height: 100,
background: '#5c7bff',
}), () => [ref.current]);
const handleCountUpClick = useCallback(() => {
setCount((prevCount) => prevCount + 1);
}, []);
const handleSizeUpClick = useCallback(() => {
setStyle((prevStyle) => ({
width: (Number(prevStyle.width) || 0) + multiple,
height: (Number(prevStyle.height) || 0) + multiple,
}));
}, []);
// `setStyle` does not trigger re-render.
console.log('count:', count);
console.log('style:', getStyle());
return <>
<button type="button" onClick={handleCountUpClick}>Count Up ({count})</button>
<hr />
<button type="button" onClick={handleSizeUpClick}>Size Up</button>
<div ref={ref} style={getStyle()} />
</>;
}
export default UseStyleSample;
0.1.0
3 years ago
0.1.1
3 years ago
0.1.0-alpha.4
3 years ago
0.1.0-alpha.3
3 years ago
0.1.0-alpha.2
3 years ago
0.1.0-alpha.1
3 years ago
0.1.0-beta.0
3 years ago
0.1.0-alpha.0
3 years ago
0.1.0-rc.0
3 years ago