lesca-use-tween v3.1.2

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

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

Options

Setting

Features

• maintain if necessary