# Tutorial/Quest List Component

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2Fhfq4brBqT3qvlukAiPDJ%2FTask%20list.png?alt=media&#x26;token=93dbd595-cd12-4f4b-bfc6-2c672ebc125f" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
To unlock early access to the component                                                             [**Get Acces**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)[**s**](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 `Tutorial`component accepts the following props

## Usage

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

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

```jsx
import { QuestProvider, Tutorial }  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 `Tutorial`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, Tutorial } 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 
      >
      <Tutorial> </Tutorial>
      </QuestProvider>
  );
}

export default App;


```

{% endtab %}

{% tab title="Tutorial" %}

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

{% endtab %}

{% tab title="Header" %}

```jsx
       <Tutorial.Header
          heading='your-heading' 
          subHeading='your-subHeading' 
          style= {{ backgroundcolor : 'white' }} 
          headingStyle= {{ fontSize : '20px }} 
          descriptionStyle= {{ fontSize : '14px' }}
        />
```

{% endtab %}

{% tab title="Footer" %}

```jsx
     
       <Tutorial.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 
      >
       <Tutorial
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
        <Tutorial.Header />
        <Tutorial.Content />
        <Tutorial.Footer />
        </Tutorial>
      </QuestProvider>
```

{% endtab %}
{% endtabs %}

***

## **Example Usage**

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

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

```jsx
import { QuestProvider, Tutorial } 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 
      >
       <Tutorial
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
        >
        <Tutorial.Header />
        <Tutorial.Content />
        <Tutorial.Footer />
        </Tutorial>
      </QuestProvider>
    </div>
  );
}

export default App;
```

{% endtab %}

{% tab title="TutorialWrapper" %}

```javascript
import { QuestProvider, TutorialWrapper } 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 
      >
       <TutorialWrapper
          userId=""
          questId=""
          token=""
          uniqueUserId="your-unique-user-id"
          styleConfig= {{
              Form: {},
              Heading: {},
              Description: {},
              Footer: {},
              TopBar: {},
          }}
          showFooter={false}
        />
      </QuestProvider>
    </div>
  );
}

export default App;
```

{% endtab %}
{% endtabs %}

## Props of Tutorial Component

<table><thead><tr><th width="193">Prop Name</th><th width="106">Type</th><th width="142">Required</th><th>Details</th></tr></thead><tbody><tr><td><strong>questId</strong></td><td>string</td><td>required</td><td>The unique identifier for the tutorial or quest</td></tr><tr><td><strong>userId</strong></td><td>string</td><td>optional</td><td>The unique identifier of the user.</td></tr><tr><td><strong>token</strong></td><td>string</td><td>optional</td><td>An authentication token or API key necessary for accessing tutorial or quest data</td></tr><tr><td><strong>Headers</strong></td><td>Array</td><td>optional</td><td>Th</td></tr><tr><td><strong>onLinkTrigger</strong></td><td>function</td><td>optional</td><td>Callback function for handling link triggers.</td></tr><tr><td><strong>showFooter</strong></td><td>string</td><td>optional</td><td>Helps remove or add footer in component.</td></tr><tr><td><strong>uniqueUserId</strong></td><td>string</td><td>optional</td><td>Unique user identifier.</td></tr><tr><td><strong>uniqueEmailId</strong></td><td>string</td><td>optional</td><td>Unique email identifier.</td></tr><tr><td><strong>variation</strong></td><td>string</td><td>optional</td><td>create different variation</td></tr><tr><td><strong>styleConfig</strong></td><td>object</td><td>optional</td><td>An object containing CSS properties for styling various components within the tutorial process, including form, topbar, headings, descriptions, and buttons. </td></tr></tbody></table>

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

***

### **Headers**

<pre><code><strong>Headers= [{
</strong>  heading: 'Your Heading' 
  subHeading : 'Your SubHeading'
}]
</code></pre>

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

<pre><code><strong>styleConfig= {{
</strong>    Form: {},
    Heading : {},
    Description : {},
    Footer: {
    FooterStyle: {},
    FooterText: {},
    FooterIcon: {}
    },
    TopBar: {},
}}
</code></pre>

### Demo

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