# Badge Component

## Component Visuals

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FWlDrfn7CYot9nyQIBr86%2FIn-App%20User%20Earned%20Badges.png?alt=media&#x26;token=ea679cc8-25ab-4872-9055-3d0782f3be8d" 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 %}

***

{% embed url="<https://drive.google.com/file/d/1zfr69DDInhgfKxMrdnesDbpEwBd-yUbz/view?usp=drive_link>" %}
How to use Badge component
{% endembed %}

In this video, you'll learn:

> 1. How to set up the `QuestProvider` with your API credentials.
> 2. Configuration of the `Badge` component with required props.
> 3. Integration of the component into your React application.

***

## 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 %}

***

## Props of Badge Component

The `Badge`component accepts the following props

<table><thead><tr><th width="195">Prop Name</th><th width="95">Type</th><th width="100">Required</th><th>Details</th></tr></thead><tbody><tr><td><strong>userId</strong></td><td>string</td><td>required</td><td>The <code>userId</code> prop is a unique identifier for the user whose badges you want to display. It is required to fetch and display the user's badges.</td></tr><tr><td><strong>token</strong></td><td>string</td><td>required </td><td>The <code>token</code> prop is an authentication token or API key that authorizes access to badge data. It is required to fetch badge information for the specified user.</td></tr></tbody></table>

***

## Usage

To integrate the `Badge`component into your React application, follow these steps

* **Import the CSS**: In your JavaScript or TypeScript file where you're using the `Badges`, import the CSS styles for the component. This ensures that the component's styling is applied correctly.

```jsx
import '@questlabs/react-sdk/dist/style.css'
```

* **Import the Badge Component**: Import the `Badge`component from the `@questlabs/react-sdk` package.
* **Import the QuestProvider Component**: Import the `QuestProvider` component from the `@questlabs/react-sdk` package.

```jsx
import { QuestProvider, Badge } from '@questlabs/react-sdk';
```

* **Pass the Required Props**:  Pass the required props to the `QuestProvider`. The required props are `apiKey`, `apiSecret`, and `entityId`. and required props for the `Badge`component are `userId, token`

<pre class="language-jsx"><code class="lang-jsx">&#x3C;QuestProvider
  apiKey="your-api-key"
  entityId="your-entity-id"
>
  &#x3C;Badge
    userId="userId"
    token="your-token"
  />
<strong>&#x3C;/QuestProvider>
</strong></code></pre>

{% hint style="info" %}
Replace `"your-api-key"`, `"your-api-secret"`, and `"your-entity-id"` with your actual Quest API credentials&#x20;
{% endhint %}

{% hint style="info" %}
Replace `"userId"` and `"your-token"` with your actual configuration details.
{% endhint %}

***

## Example Usage

Here's an example of how to use the `Badge`component within your React application

```jsx
import { QuestProvider, Badge } from '@questlabs/react-sdk';
import '@questlabs/react-sdk/dist/style.css';

function App() {
  return (
    <div>
      <QuestProvider
        apiKey="your-api-key""
        entityId="your-entity-id""
      >
        <Badge
          userId="userId"
          token="token"
         />
      </QuestProvider>
    </div>
  );
}

export default App;
```

{% hint style="info" %}
The above example uses all the props.
{% endhint %}

***

***