Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/acrool/acrool-react-jackpot
React jackpot animation
https://github.com/acrool/acrool-react-jackpot
jackpot reactjs
Last synced: about 2 months ago
JSON representation
React jackpot animation
- Host: GitHub
- URL: https://github.com/acrool/acrool-react-jackpot
- Owner: acrool
- License: mit
- Created: 2023-05-11T00:22:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-29T14:48:31.000Z (about 2 months ago)
- Last Synced: 2024-11-05T14:19:00.974Z (about 2 months ago)
- Topics: jackpot, reactjs
- Language: MDX
- Homepage: https://acrool-react-jackpot.pages.dev
- Size: 3.05 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Acrool React Jackpot
Fast custom jackpot for Reactjs[![NPM](https://img.shields.io/npm/v/@acrool/react-jackpot.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-jackpot)
[![npm](https://img.shields.io/bundlejs/size/@acrool/react-jackpot?style=for-the-badge)](https://github.com/acrool/@acrool/react-jackpot/blob/main/LICENSE)
[![npm](https://img.shields.io/npm/l/@acrool/react-jackpot?style=for-the-badge)](https://github.com/acrool/react-jackpot/blob/main/LICENSE)[![npm downloads](https://img.shields.io/npm/dm/@acrool/react-jackpot.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-jackpot)
[![npm](https://img.shields.io/npm/dt/@acrool/react-jackpot.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-jackpot)## Features
- Support custom length
## Install
```bash
yarn add @acrool/react-jackpot
```## Usage
add in your index.tsx
```tst
import "@acrool/react-jackpot/dist/index.css";
```then in your page
```tsx
import {Flex, fr, Grid} from '@acrool/react-grid';
import styled from 'styled-components';import {Jackpot} from '@acrool/react-jackpot';
import {generatorArray} from '@acrool/js-utils/array';
import {useRef} from "react";const Example = () => {
const [amount, setAmount] = useState(32767);
const timeRef = useRef(null);useEffect(() => {
timeRef = setInterval(() => {
onChange(getRandom(1000));
}, 3000);return () => {
clearInterval(timeRef.current);
};}, []);
return (
);export default Example;
```
There is also a example that you can play with it:
[![Play react-editext-example](https://raw.githubusercontent.com/acrool/acrool-react-jackpot/main/play-in-example-button.svg)](https://acrool-react-jackpot.pages.dev)
## License
MIT © [Acrool](https://github.com/acrool) & [Imagine](https://github.com/imagine10255)