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