https://github.com/tholman/confetti
React Confetti
https://github.com/tholman/confetti
Last synced: 9 months ago
JSON representation
React Confetti
- Host: GitHub
- URL: https://github.com/tholman/confetti
- Owner: tholman
- Created: 2024-10-16T01:32:17.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-24T01:43:59.000Z (about 1 year ago)
- Last Synced: 2024-10-24T06:07:41.022Z (about 1 year ago)
- Language: TypeScript
- Size: 213 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
### React Confetti
A react component to show a neat css animated confetti effect I've used around 50 times over the last 10 years. Componentized for easy use, variablility and a few extra bells and whistles.
See it in [action](https://tholman.com/react-confetti/).
Credit where credit is due, after a lot of digging I believe [this](https://codepen.io/lukemeyrick/pen/oNoQROr) is the original? Although perhaps it too had some prior art.
#### Installation
Add to your project via npm or yarn
```bash
npm install @tholman/confetti --save
```
```bash
yarn add @tholman/confetti
```
#### Usage
Import in your react component, and apply generously.
```javascript
import Confetti from '@tholman/confetti';
```
```javascript
```
You can also pass in an array of components to create a more controlled effect. There are a couple of base shapes provided.
```javascript
import Confetti, { Rectangle, Circle, Triangle } from '@tholman/confetti';
```
```javascript
,
,
,
]} />
```
The containter itself is absolutely positioned, and will try to expand into the space you give it, but you can also control its css as you would any element.
```javascript
```
#### Customization
The library provides you with a couple of base confetti shapes, but you can also pass in your own components for more variety.
```javascript
} />
```
#### License
ISC