NumFlop

An express deition number flip animation library by canvas.

it can be used on any web packag, what ever react or vue.

Next I will improve it:

1.add prefix and suffix.

2.this packag can accept num or img.

3.I will complete the document.

if you have any question, pelease send email to [email protected].

option

const option = {
  global: { textAlign: "center", width: window.innerWidth },
  font: {
    fontSize: 132,
    color: "#fff",
    fontFamily: "FZLTTHJW",
    fontWeight: "normal",
    textShadow: "10px 10px 10px red",
  },

use

import { useEffect, useRef } from "react";
import NumFlop from "num-flop";
import { option } from "./numFlop/flopData";
import { getRandomNum } from "./numFlop/tool";

const Index = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const value = 123456;
  const numflopInst = useRef<NumFlop | null>(null);

  useEffect(() => {
    if (!canvasRef.current) {
      return;
    }

    numflopInst.current = new NumFlop(canvasRef.current, option, value);

    setInterval(() => {
      const number = getRandomNum(10001, 99999);
      // console.log("number---", number);
      if (numflopInst.current) numflopInst.current.setNum(number);
    }, 18000);
  }, []); // eslint-disable-line

  return <canvas ref={canvasRef} style={{ background: "black" }} />;
};

export default Index; 

numFlop