Skip to content

Commit

Permalink
Merge pull request #3 from aynzad/added-is-infinite-props
Browse files Browse the repository at this point in the history 
feat: added `isInfinite` props
  • Loading branch information
@AlirezaHadjar
AlirezaHadjar authored Nov 3, 2024
2 parents a57b539 + 9e8a718 commit d0419c7
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 26 deletions.
44 changes: 21 additions & 23 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,12 @@ https://github.com/user-attachments/assets/968a376f-f20c-4a94-886b-65b1625891ae
> [!IMPORTANT]
> This library depends on [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) and [@shopify/react-native-skia](https://github.com/Shopify/react-native-skia). Make sure to install those first.

```sh
yarn add react-native-fast-confetti
```

## Usage


```tsx
import { Confetti } from 'react-native-fast-confetti';

Expand All @@ -33,30 +31,30 @@ return (

## 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. |
| `duration` | No | 8000 ms | The duration of the confetti animation in milliseconds. |
| `autoplay` | No | true | Whether the animation should play on mount. |
| `colors` | No | N/A | The array of confetti flakes colors. |
| `autoStartDelay` | No | 0 | Delay before the confetti animation starts automatically (in ms). |
| `verticalSpacing` | No | 30 | The approximate space between confetti flakes vertically. Lower value results in denser confetti. |
| `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. |
| 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. |
| `duration` | No | 8000 ms | The duration of the confetti animation in milliseconds. |
| `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. |
| `autoStartDelay` | No | 0 | Delay before the confetti animation starts automatically (in ms). |
| `verticalSpacing` | No | 30 | The approximate space between confetti flakes vertically. Lower value results in denser confetti. |
| `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 |
|-----------|------------------------------------------------------|
| `restart` | Start the animation from the beginning. |
| `pause` | Pause the animation. |
| `reset` | Reset the animation and prevent it from playing. |
| `resume` | Resume the animation from where it paused. |

| Name | Description |
| --------- | ------------------------------------------------ |
| `restart` | Start the animation from the beginning. |
| `pause` | Pause the animation. |
| `reset` | Reset the animation and prevent it from playing. |
| `resume` | Resume the animation from where it paused. |

## Contributing

Expand Down
7 changes: 4 additions & 3 deletions src/Confetti.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export const Confetti = forwardRef<ConfettiMethods, ConfettiProps>(
width: _width,
height: _height,
autoplay = true,
isInfinite = autoplay,
fadeOutOnEnd = false,
cannonsPositions = [],
},
Expand Down Expand Up @@ -165,7 +166,7 @@ export const Confetti = forwardRef<ConfettiMethods, ConfettiProps>(
JSOnStart();

progress.value = runAnimation(
{ infinite: autoplay, blastDuration, fallDuration },
{ infinite: isInfinite, blastDuration, fallDuration },
(finished) => {
'worklet';
if (!finished) return;
Expand All @@ -187,7 +188,7 @@ export const Confetti = forwardRef<ConfettiMethods, ConfettiProps>(
{
blastDuration: isBlasting ? blastRemaining : undefined,
fallDuration: isBlasting ? fallDuration : fallingRemaining,
infinite: false,
infinite: isInfinite,
},
(finished) => {
'worklet';
Expand All @@ -198,7 +199,7 @@ export const Confetti = forwardRef<ConfettiMethods, ConfettiProps>(

if (autoplay)
progress.value = runAnimation(
{ infinite: true, blastDuration, fallDuration },
{ infinite: isInfinite, blastDuration, fallDuration },
(_finished) => {
'worklet';
if (!_finished) return;
Expand Down
5 changes: 5 additions & 0 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,11 @@ export type ConfettiProps = {
* @default true
*/
autoplay?: boolean;
/**
* @description Wether the animation should play again after it ends.
* @default true
*/
isInfinite?: boolean;
/**
* @description The array of confetti flakes color.
*/
Expand Down

0 comments on commit d0419c7

Please sign in to comment.