https://github.com/zmops/numbers-scroll

react 数字滚动组件
https://github.com/zmops/numbers-scroll

Last synced: 8 months ago
JSON representation

react 数字滚动组件

• Host: GitHub
• URL: https://github.com/zmops/numbers-scroll
• Owner: zmops
• Created: 2023-03-09T04:37:54.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-10T06:01:24.000Z (over 3 years ago)
• Last Synced: 2025-08-29T04:53:54.027Z (10 months ago)
• Language: JavaScript
• Size: 1.08 MB
• Stars: 7
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# numbers-scroll

A very simple light weight react-component that animates your number updates. You can customize the style to adapt to a variety of scenes.

一个非常轻量的，react数字滚动组件，可以自定义样式，适应于多种场景。



    



---

## Scrolling effect

![Scrolling Numbers](https://www.webfunny.cn/resource/scroll.gif)

## Run Demo (运行Demo)

step1: git clone https://github.com/zmops/numbers-scroll.git

step2: npm install

step3: npm run dev

step4: http://localhost:9100/example.html

## Installation

`npm install numbers-scroll --save`

## Examples 1

```javascript

import React, { useState } from 'react'

import NumbersScroll from 'numbers-scroll'

const MyNumberScroll = () => {

    const [number, setNumber] = useState(896507);

    return (

        


            

        

    )

}

```


## Examples 2

```javascript

import React, { Component } from "react"

import NumbersScroll from 'numbers-scroll'

class MyNumberScroll extends Component {

  constructor(props) {

    super(props)

    this.state = {

      number: 896507

    }

  }

  render() {

    const { number } = this.state

    return 


      

    

  }

}

```


## Parameter Description（参数说明）

split：separator（分隔符）

value：number（数字）

numberStyle：number style（数字的样式）

containerStyle：container style（容器的样式）