A style tweener for react hook.
npm install lesca-use-tween --save
import useTween from 'lesca-use-tween';
const Component = () => {
const [style, setStyle, destroy] = useTween({ opacity: 0 });
useEffect(() => {
setStyle({ opacity: 1 }); // tween opacity 0 => 1
return () => destroy();
}, []);
return <div style={style} />;
};
prevent render on each frame. we can use provider component.
import { TweenProvider } from 'lesca-use-tween';
const Component = () => {
// ! will not keep render each frame in this component.
return (
<TweenProvider
initStyle={{ opacity: 0 }}
tweenStyle={{ opacity: 1 }}
tweenOptions={{ duration: 1000 }}
>
<div>component</div>
</TweenProvider>
);
};
method | options | description | return |
---|---|---|---|
useTween(initStyle:object) | initStyle | React css-inline-js | [style, setStyle, destroy] |
color, backgroundColor, borderColor... About color properties use hex(#FF6600) only. Transform need to split to {scale, rotate, x, y };
const style = { transform: 'scale(2) rotate(90deg) translateX(10px) translateY(20px)' } => { scale:2, rotate:90, x:10, y:20 }
method | options | description |
---|---|---|
setStyle( style:object, setting:object ) | options | same as useState |
Options | type | description |
---|---|---|
style | object | React css-inline-js |
setting | object | Setting |
setting | type | description | default |
---|---|---|---|
easing | array | css Bezier | Bezier.OutQuart |
duration | number | tween duration | 1000 |
delay | number | delay duration | 0 |
onStart | function | call when tween start | |
onUpdate | function | call for each frame | |
onEnd | function | call for tween finished |
- maintain if necessary