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