lesca-use-tween v3.0.8
Why use it?
A style tweener for react hook.
Live Demo
codesandbox
Installation
npm install lesca-use-tween --save
Usage
use hook
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} />;
};
use provider
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>
);
};
Development
Methods
method | options | description | return |
---|---|---|---|
useTween(initStyle:object) | initStyle | React css-inline-js | style, setStyle, destroy |
React css-inline-js
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 }
Hook State Method
method | options | description |
---|---|---|
setStyle( style:object, setting:object ) | options | same as useState |
Options
Options | type | description |
---|---|---|
style | object | React css-inline-js |
setting | object | Setting |
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 |
Features
- maintain if necessary
2 months ago
2 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago