> 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/gamification/challenges-component.md).

# Challenges Component

## **Component Visuals**

{% tabs %}
{% tab title="Overview" %}

<figure><img src="/files/mrRvrgQh6CC9DJAMAJEm" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="/files/2vxHM5SiFU9Wc3FgwLTB" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="/files/g3O6pTb323f2KKfBCsiV" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

***

The `Challenges`component accepts the following props

## Usage

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

* **Import the CSS**: In your JavaScript or TypeScript file where you're using the `Challenges`, 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 TutorialComponent**: Import the `Challenges` component from the `@questlabs/react-sdk` package.
* **Import the QuestProvider Component**: Import the `QuestProvider` component from the `@questlabs/react-sdk` package.

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

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

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

{% hint style="info" %}
Replace `"your-token"`, `"your-user-id", "your-questId"` with your actual configuration details.
{% endhint %}

## Code & Steps

{% tabs %}
{% tab title="QuestProvider" %}

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

function App() {
  return (
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id" 
        apiType= "PRODUCTION" // STAGING 
      >
      <Challenges> </Challenges>
      </QuestProvider>
  );
}

export default App;
```

{% endtab %}

{% tab title="Challenges" %}

```
  <Challenges
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
    // children
</Challenges>
```

{% endtab %}

{% tab title="Header" %}

```
<Challenges.Header
    iconStyle={ }
    icon=""
    title=""
    heading='your-heading' 
    subHeading='your-subHeading' 
    style= {{ backgroundcolor : 'white' }} 
    headerStyle= {{ fontSize : '20px }} 
    descriptionStyle= {{ fontSize : '14px' }}
/>
```

{% endtab %}

{% tab title="Footer" %}

```
<Challenges.Footer
    text='your-company-name' 
    link='redirect-link'
    style={{ background : 'white' }}
/>
```

{% endtab %}

{% tab title="Preview" %}

```jsx
<QuestProvider
    apiKey="your-apikey"
    entityId="your-entity-Id" 
    apiType= "PRODUCTION" // STAGING 
>
  <Challenges
    userId=""
    questId=""
    token=""
    uniqueUserId="your-unique-user-id"
  >
    <Challenges.Header />
    <Challenges.Content />
    <Challenges.Footer />
  </Challenges>
</QuestProvider>
```

{% endtab %}
{% endtabs %}

### Example Usage

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

{% tabs %}
{% tab title="Challenges" %}

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

function App() {
  return (
    <div>
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id" 
        apiType= "PRODUCTION" // STAGING 
      >
       <Challenges
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
          <Challenges.Header />
          <Challenges.Content />
          <Challenges.Footer />
        </Challenges>
      </QuestProvider>
    </div>
  );
}

export default App;
```

{% endtab %}

{% tab title="ChallengesWrapper" %}

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

function App() {
  return (
    <div>
      <QuestProvider
        apiKey="your-apikey"
        entityId="your-entity-Id"
        apiType= "PRODUCTION" // STAGING 
      >
       <ChallengesWrapper
          token=""
          userId=""
          questId=""
          enableVariation={true}
          styleConfig={{
            Form: {},
            MainHeading: {},
            Heading: {},
            Search: {},
            Description: {},
            PointsColor: {},
            ProgressBarColor: {},
            InnerBackground: {},
            IconStyle: {},
            Footer: {},
          }}
          isLoader={true}
          mainHeading=""
          showFooter={true}
          subHeading=""
          uniqueEmailId=""
          uniqueUserId=""
        />
      </QuestProvider>
    </div>
  );
}

export default App;
```

{% endtab %}
{% endtabs %}

### **Challenges Component Props**

The `Challenges` component accepts a variety of props to configure and customize the challenges process:

<table><thead><tr><th width="256">Prop Name</th><th width="95">Type</th><th width="99">Required</th><th>Details</th></tr></thead><tbody><tr><td>userId</td><td>string</td><td>required</td><td>The unique identifier for the user participating in the onboarding process.</td></tr><tr><td>token</td><td>string</td><td>required</td><td>An authentication token used for authorization.</td></tr><tr><td>questId</td><td>string</td><td>required</td><td>The unique identifier for the onboarding quest that defines the sequence of screens and questions.</td></tr><tr><td>title</td><td>string</td><td>required</td><td>set the title of your component</td></tr><tr><td>enableVariation</td><td>boolean</td><td>optional</td><td>To enable different type of variations</td></tr><tr><td>styleConfig</td><td>object</td><td>optional</td><td>An object containing CSS properties for styling various components within the onboarding process, including form, headings, descriptions, inputs, labels, buttons, single-choice options, multi-choice options, and progress bar.</td></tr><tr><td>isLoader</td><td>boolean</td><td>optional</td><td>Hides or Enables the loader.</td></tr><tr><td>mainHeading</td><td>string</td><td>optional</td><td>Sets the main heading.</td></tr><tr><td>subHeading</td><td>string</td><td>optional</td><td>Sets the sub heading.</td></tr><tr><td>showFooter</td><td>boolean</td><td>optional</td><td>Hides or enables the Footer</td></tr><tr><td>uniqueUserId</td><td>string</td><td>optional</td><td>UniqueUserid for external Login.</td></tr><tr><td>uniqueEmailId</td><td>string</td><td>optional</td><td>UniqueEmailId for external login.</td></tr></tbody></table>

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

#### Challenges Component Features

1. **Interactive Onboarding**: The component guides users through a sequence of screens, collects their responses, and provides customization options for a dynamic onboarding experience.
2. **Customization Options**: You can customize various aspects of the onboarding process, including colors, input styles, button sizes, font sizes, and more.
3. **Data Collection**: The component collects user responses, allowing you to set and update answers as users progress through the onboarding flow.
4. **Dynamic Content**: Customize the content and appearance of onboarding screens based on the `design` and `headingScreen` props.
5. **Integration with API**: The component integrates with your API to retrieve onboarding criteria and eligibility data, enhancing the user experience.

**You can customize the UI with type of styleConfig would be**

```typescriptreact
styleConfig={{
    Form: {},
    MainHeading: {},
    Heading: {},
    Search: {},
    Description: {},
    PointsColor: {},
    ProgressBarColor: {},
    InnerBackground: {},
    IconStyle: {},
    Footer: {},
}}
```

#### Challenges Component Usage

To use the `Challenges` component in your React application, follow these steps:

Import the necessary components and dependencies:

Include the `Challenges` component within your application, passing the required and optional props:

1. Customize the challenges experience by adjusting the props to meet your application's requirements.
2. Integrate the `Challenges` component with your API to retrieve relevant challenges data and users ranking data.

By following these steps, you can seamlessly integrate and customize the `Challenges` component within your React application to create dynamic and interactive user challenges experiences.