> For the complete documentation index, see [llms.txt](https://docs.questera.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/confetti-component.md).

# Confetti Component

<figure><img src="/files/Cx3bzFBvW6fBVglNi9ey" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

##

## Installation

To install the `Quest react-sdk` into your project, follow these steps:

* Open your terminal/command prompt.
* Navigate to your project's root directory using the `cd` command if you're not already there.
* Run the following command to install the `quest-sdk` package using npm:

```jsx
npm install @questlabs/react-sdk
```

> This command will download and install the package and its dependencies into your project.

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

### Usage

To use the `confetti` function, follow these steps:

1. Import the `confetti` function if it's in a separate module:

   ```javascript
   import { confetti } from '@questlabs/react-sdk'; // Import the confetti module.
   import '@questlabs/react-sdk/dist/style.css'
   ```
2. Call the `confetti` function with an optional duration (in milliseconds):

   ```javascript
   javascriptCopy code// Example: Display confetti for 3 seconds (3000 milliseconds).
   confetti(3000);
   ```
3. The confetti animation will be displayed on the webpage for the specified duration, and then it will automatically disappear.

### Example Usage

Here's an example of how to use the `confetti` function within your web application:

```javascript
import { confetti } from '@questlabs/react-sdk';  // Import the confetti module.

function celebrateEvent() {
  // Display confetti for 5 seconds (5000 milliseconds).
  confetti(5000);
}

// Trigger the confetti animation on a celebration event, like a button click.
celebrateEvent();
```

This documentation provides an overview of the `confetti` function, usage instructions, and an example of how to trigger the confetti animation in your web application. You can adapt it to your specific needs and provide more details if necessary.

## Demo

{% embed url="<https://drive.google.com/file/d/1rDIYgOWHHSqxuWRh9TLLZIxCyqCb59ph/view>" %}