?? ?? ????? ?????? ???? ?? ????? ??? ??????. ??? Paul Henschel? ?? ??? ??? ? React-Spring? ????? ?? ??????. ????? ? ?? ??? ???? ??? ? ??? ??? ? API? ?????.

? ????? React-Spring? 5 ? ?? ? 2 ?? useSpring ? useTrail ?????. ??? ?? ??? ?? ??? ???? ?????.

????? React-Spring? ??????.

 # ??
??? ?? ???? ?????

# npm
NPM React-Spring-SAVE ??

useSpring ?? ?????

useSpring Hook? ?? ?? ??? ??? ???????. ??? ?????? ?? ? ???? ???? to from ? ?????. ?? ??? ?? from ?? ??? to ???.

? ?? ??? useSpring ???? ??? ??? ? ???? ??? ????????. ???? ??? ??? ??? ???? ?????.

 import React, {usestate} 'react';
'React-Spring'?? {usepring, animated} import;

const app = () => {
  const [showcontent, setshowContent] = usestate (false);
  const contentprops = usepring ({
    ???? : ? ???? 1 : 0,
    Margintop : Showcontent? 0 : -1000,
    ?? : {?? ?? : 500} // ?? ?? : ????? ?? ??
  });

  ?? (
    <div classname="container">
      <button classname="button" onclick="{()"> SetShowContent (! showContent)}>
        ??? ??
      </button>
      <animated.div classname="box" style="{contentProps}">
        <h1>? ???? React Spring ??? ???????!</h1>
      </animated.div>
    </div>
  );
};

useSpring Hook? ?????? ?????. showContent ???? ??? ??? ? ?? ?????. ??? ??? ???? ??? ????.

useTrail ? ?? ????? ??

useTrail Hook? ?? ??? ????? ????????. ? ??? ?? ?? ?? ????????. ??? ??? ?? ?? ???? ??????????.

 import React, {usestate, useeffect} '??'react ';
'React-Spring'?? {Usetrail, Animated} ?? ??;

const app = () => {
  const [users, setUsers] = usestate ([]);
  useeffect (() => {
    fetch ( 'https://jsonplaceholder.typicode.com/users')
      . then (res => res.json ())
      .
  }, []);

  const trail = usetrail (user.length, {
    ?? ?? : {marginleft : -20, ???? : 0, transform : 'translate3d (0, -40px, 0)'},
    to : {marginleft : 20, ???? : 1, transform : 'translate3d (0,0px, 0)'},
    ?? : {Mass : 5, ?? : 2000, ?? : 200} // ?? ?? : ?? ?? ?????
  });

  ?? (
    <div>
      <h1>??? ???</h1>
      {trail.map (({style}, index) => (
        <animated.div key="{users[index]?.id}" classname="box" style="{style}">
          {user [index]?. ??? ??}
        </animated.div>
      ))}
    </div>
  );
};

useTrail ??? ??? ?? ??? ?????? ????. ? ??? ??? ?? ???? ??????. ? ???? ?????? ?? ?? ?? ? ??? ??? ???? ????.

??

React Spring? React ?? ????? ?????? ?? ??? ??? ? ?? ??? ?????. ???? ??? ??? ???? ???? ????? ???? ?? ??????. ?????? ??? ? ???? ???????.

? ??? React Spring? ???? ????? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!