react-spring#useSprings JavaScript Examples

FlashCards = props => {
  const { cardData, mode, score, showQuizScoreDialog, setQuizScore, updateQuizScore } = props;
  const classes = useStyles();
  const [gone] = useState(() => new Set());
  const [cardProp, set] = useSprings(cardData.length, i => ({ ...to(i), from: from(i) }));
  const bind = useDrag(({ args: [index], down, movement: [mx], direction: [xDir], velocity }) => {
    const trigger = velocity > 0.2;
    const dir = xDir < 0 ? -1 : 1;

    if (!down && trigger) gone.add(index);
    set(i => {
      if (index !== i) return; // We're only interested in changing spring-data for the current spring
      const isGone = gone.has(index);
      const x = isGone ? (100 + window.innerWidth) * dir : down ? mx : 0; // When a card is gone it flys out left or right, otherwise goes back to zero
      const rot = mx / 100 + (isGone ? dir * velocity : 0); // How much the card tilts, flicking it harder makes it rotate faster
      const scale = down ? 1.1 : 1; // Active cards lift up a bit
      if (mode === 'quiz' && isGone) {
        const userAns = x > 0;
        if (userAns === cardData[i].answer) updateQuizScore({ score: score + 1 });
      }
      return { x, rot, scale, delay: undefined, config: { friction: 50, tension: down ? 800 : isGone ? 200 : 500 } };
    });
    if (!down && gone.size === cardData.length) {
      if (mode === 'quiz') {
        setQuizScore({ score, quizSize: cardData.length });
      }
      setTimeout(() => {
        return gone.clear() || set(i => to(i));
      }, 600);
    }
  });

  return (
    <div>
      {showQuizScoreDialog && <QuizScoreDialog />}
      <Typography color="secondary" variant="button">
        {mode === 'quiz' && `Score ${score}/${cardData.length}`}
      </Typography>
      <div className={classes.FlashCards}>
        {cardProp.map(({ x, y, rot, scale }, i) => (
          <Card
            key={`${i}card`}
            i={i}
            x={x}
            y={y}
            rot={rot}
            scale={scale}
            trans={trans}
            data={cardData[cardData.length - i - 1]}
            bind={bind}
            mode={mode}
          />
        ))}
      </div>
    </div>
  );
}

HomeBackground = () => {
  const [props] = useSprings(spotsArray.length, () => ({
    ...to(),
    from: from(),
    config: {
      duration: "70000",
      friction: "300",
    },
  }))

  return (
    <div className="home-background">
      <div className="triangle-wrapper">
        <svg
          width="1024px"
          height="380px"
          viewBox="0 0 1024 380"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          className="home-background-triangle"
        >
          <defs>
            <linearGradient
              x1="50%"
              y1="56.2263569%"
              x2="50%"
              y2="100%"
              id="linearGradient-1"
            >
              <stop stopColor="#F26071" offset="0%"></stop>
              <stop stopColor="#DF5A63" stopOpacity="0.4" offset="100%"></stop>
            </linearGradient>
          </defs>
          <g
            id="Home-Page"
            stroke="none"
            strokeWidth="1"
            fill="none"
            fillRule="evenodd"
            fillOpacity="0.8"
          >
            <g id="Ladybug-Podcast-Home-Page" fill="url(#linearGradient-1)">
              <g id="player">
                <polygon
                  id="Rectangle"
                  points="410 0 1024 380 -5.68434189e-13 380"
                ></polygon>
              </g>
            </g>
          </g>
        </svg>
        {props.map(({ x, y }, i) => {
          let { width, height, backgroundColor, borderRadius } = spotsArray[i]
          return (
            <animated.div
              key={i}
              className="spot"
              style={{
                transform: interpolate(
                  [x, y],
                  (x, y) => `translate3d(${x}px,${y}px,0)`
                ),
                backgroundColor: backgroundColor,
                width: width,
                height: height,
                borderRadius: borderRadius,
              }}
            />
          )
        })}
      </div>
    </div>
  )
}