TODO: README

Getting Started

• Basic Use

<div id='app' />

import NumberFrame from '@hansuhhi-don/number-frame';

const numberFrame = new NumberFrame({
  from: -200,
  to: 2022,
  duration: 4044,
  element: document.getElementById("app"),
});

setTimeout(() => {
    numberFrame.start();
}, 1000);

When you open the page some changes have happened.

• Vue

import { NumberFrame } from "@hansuhhi-don/number-frame";
import { defineComponent, onMounted, ref } from "vue";

const nf = new NumberFrame({
  from: 0,
  to: 2022,
  duration: 2000,
});

export default defineComponent({
  setup: () => {
    const num = ref(0);

    onMounted(() => {
      nf.start(() => (num.value = nf.number));
    });
    return () => {
      return <p>{num.value}</p>;
    };
  },
});

This is a demo in my project

API

• NumberFrame

class

| key | type | description | | ---- | ---- | ---- | | start | (cb: Function) => void | Start changing numbers as expected cb will be called every time | | value | Number | Number in a frame. |

• NumberFrameProps

constructor

| key | type | description | | ---- | ---- | ---- | | from | ? Number(default: 0) | Starting number | | to | Number | End number | | duration | ? Number(default: 1000) | Total time(ms) | | element | ? HTMLElement | If you have an html element, numbers will autoplay in this element|