From 58255b711e0726877c7c07a13d452e1e98f9bbb2 Mon Sep 17 00:00:00 2001 From: Alireza Hadjar <57192409+AlirezaHadjar@users.noreply.github.com> Date: Sun, 3 Nov 2024 23:26:08 +0300 Subject: [PATCH] Update README.md --- README.md | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 51 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b8520cf..8f51245 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,16 @@ yarn add react-native-fast-confetti ``` ## Usage +### `` +This animation creates a basic confetti effect where pieces fall from the top in a straight line. + +https://github.com/user-attachments/assets/d89ef248-6b27-435e-a322-fb62a3550343 + +You can also use the `cannonPositions` option to simulate confetti being launched from cannons before falling. in the screen recording, there's only one cannon. You can also pass multiple cannon positions to shoot confetti from multiple cannons + + +https://github.com/user-attachments/assets/f59b930d-7c22-4901-9c3e-995cc66b6ae9 + ```tsx import { Confetti } from 'react-native-fast-confetti'; @@ -28,8 +38,27 @@ return ( ) ``` +### `` +This confetti type creates an effect where flakes burst outward from the center, and then drift down gracefully. + +https://github.com/user-attachments/assets/30008c3b-0f1a-4dff-afdb-2ded80809291 + + +```tsx +import { PIConfetti } from 'react-native-fast-confetti'; + +// ... + +return ( + + {...Your other components} + + {...Your other components} + +) +``` -## Props +## `` Props | Name | Required | Default Value | Description | | ------------------ | -------- | ------------------------ | ------------------------------------------------------------------------------------------------- | @@ -37,7 +66,9 @@ return ( | `flakeSize` | No | { width: 8, height: 16 } | The size of each confetti flake (object with `width` and `height`). | | `width` | No | SCREEN_WIDTH | The width of the confetti's container. | | `height` | No | SCREEN_HEIGHT | The height of the confetti's container. | -| `duration` | No | 8000 ms | The duration of the confetti animation in milliseconds. | +| `fallDuration` | No | 8000 ms | The duration of confetti falling down (milliseconds). | +| `blastDuration` | No | 300 ms | The duration of confetti blast (milliseconds). Use with `cannonsPositions` | +| `cannonsPositions` | No | N/A | An array of positions from which confetti flakes should blast. | | `autoplay` | No | true | Whether the animation should play on mount. | | `isInfinite` | No | follows `autoplay` | Wether the animation should play again after it ends. | | `colors` | No | N/A | The array of confetti flakes colors. | @@ -47,6 +78,24 @@ return ( | `onAnimationStart` | No | N/A | Callback function triggered when the falling animation starts. | | `onAnimationEnd` | No | N/A | Callback function triggered when the falling animation ends. | +## `` Props + +| Name | Required | Default Value | Description | +| ------------------ | -------- | ------------------------ | ------------------------------------------------------------------------------------------------- | +| `count` | No | 200 | Number of confetti pieces to render. | +| `flakeSize` | No | { width: 8, height: 16 } | The size of each confetti flake (object with `width` and `height`). | +| `width` | No | SCREEN_WIDTH | The width of the confetti's container. | +| `height` | No | SCREEN_HEIGHT | The height of the confetti's container. | +| `blastDuration` | No | 300 ms | The duration of confetti blast (milliseconds). | +| `fallDuration` | No | 8000 ms | The duration of the confetti animation in milliseconds. | +| `blastPosition` | No | `{ x: containerWidth / 2, y: 150 }` | The position from which confetti flakes should blast. | +| `blastRadius` | No | 180 | The radius of the blast. | +| `colors` | No | N/A | The array of confetti flakes colors. | +| `fadeOutOnEnd` | No | N/A | Should the confetti flakes fade out as they reach the bottom. | +| `onAnimationStart` | No | N/A | Callback function triggered when the falling animation starts. | +| `onAnimationEnd` | No | N/A | Callback function triggered when the falling animation ends. | + + ## Methods | Name | Description |