{"id":20458495,"url":"https://github.com/zmops/numbers-scroll","last_synced_at":"2025-10-10T13:35:48.362Z","repository":{"id":134067875,"uuid":"611566168","full_name":"zmops/numbers-scroll","owner":"zmops","description":"react 数字滚动组件","archived":false,"fork":false,"pushed_at":"2023-03-10T06:01:24.000Z","size":1131,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-29T04:53:54.027Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zmops.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-03-09T04:37:54.000Z","updated_at":"2025-04-11T04:35:26.000Z","dependencies_parsed_at":"2023-05-30T05:45:43.564Z","dependency_job_id":null,"html_url":"https://github.com/zmops/numbers-scroll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zmops/numbers-scroll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zmops%2Fnumbers-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zmops%2Fnumbers-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zmops%2Fnumbers-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zmops%2Fnumbers-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zmops","download_url":"https://codeload.github.com/zmops/numbers-scroll/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zmops%2Fnumbers-scroll/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279004056,"owners_count":26083667,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T12:12:46.342Z","updated_at":"2025-10-10T13:35:48.356Z","avatar_url":"https://github.com/zmops.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# numbers-scroll\n\nA very simple light weight react-component that animates your number updates. You can customize the style to adapt to a variety of scenes.\n\n一个非常轻量的，react数字滚动组件，可以自定义样式，适应于多种场景。\n\n\u003cp align=center\u003e\n    \u003cimg width=680 src=\"https://www.webfunny.cn/resource/tuiguang.png\"/\u003e\n\u003c/p\u003e\n\n---\n\n## Scrolling effect\n\n![Scrolling Numbers](https://www.webfunny.cn/resource/scroll.gif)\n\n## Run Demo (运行Demo)\n\nstep1: git clone https://github.com/zmops/numbers-scroll.git\n\nstep2: npm install\n\nstep3: npm run dev\n\nstep4: http://localhost:9100/example.html\n\n\n## Installation\n\n`npm install numbers-scroll --save`\n\n\n## Examples 1\n\n```javascript\nimport React, { useState } from 'react'\nimport NumbersScroll from 'numbers-scroll'\n\nconst MyNumberScroll = () =\u003e {\n    const [number, setNumber] = useState(896507);\n    return (\n        \u003cdiv className=\"example-container\"\u003e\n            \u003cNumbersScroll\n                split={true}\n                value={number}\n                numberStyle={{\n                fontSize: 50,\n                background: \"#51a4e9\",\n                color: \"#fff\",\n                marginLeft: 2,\n                marginRight: 2\n                }}\n            /\u003e\n        \u003c/div\u003e\n    )\n}\n```\n\n## Examples 2\n\n```javascript\nimport React, { Component } from \"react\"\nimport NumbersScroll from 'numbers-scroll'\n\nclass MyNumberScroll extends Component {\n  constructor(props) {\n    super(props)\n    this.state = {\n      number: 896507\n    }\n  }\n  render() {\n    const { number } = this.state\n    return \u003cdiv className=\"example-container\"\u003e\n      \u003cNumbersScroll\n        split={true}\n        value={number}\n        numberStyle={{\n          fontSize: 50,\n          background: \"#51a4e9\",\n          color: \"#fff\",\n          marginLeft: 2,\n          marginRight: 2\n        }}\n      /\u003e\n    \u003c/div\u003e\n  }\n}\n```\n\n## Parameter Description（参数说明）\n\nsplit：separator（分隔符）\n\nvalue：number（数字）\n\nnumberStyle：number style（数字的样式）\n\ncontainerStyle：container style（容器的样式）\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzmops%2Fnumbers-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzmops%2Fnumbers-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzmops%2Fnumbers-scroll/lists"}