# DailyStreak Component

## **Component Visuals**

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

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FX1uGSbUnyNItyRNxkxBm%2FStreak.png?alt=media&#x26;token=bc938f87-7f85-4ac3-8a1b-2287b35ead67" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 1" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2FKt7Uok0LJ73tmJbBjZ81%2FGamification%20-%20Streaks%20temp1.png?alt=media&#x26;token=f02e0d77-e1b4-4892-ac9b-249109d18248" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Visual 2" %}

<figure><img src="https://1173113760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYEKIeE9xnHLXuuwEs8zo%2Fuploads%2Fqg2JhwShfhuKVleMGwdh%2FGamification%20-%20Streaks%20temp2.png?alt=media&#x26;token=39292176-6f97-4485-8b90-70b3ef14158f" 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 `DailyStreak`component accepts the following props

## Usage

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

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

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

export default App;
```

{% endtab %}

{% tab title="DailyStreak" %}

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

{% endtab %}

{% tab title="Counter" %}

```jsx
<DailyStreak.Counter style= {{ backgroundcolor : 'white' }} />
```

{% endtab %}

{% tab title="Footer" %}

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

{% endtab %}
{% endtabs %}

***

## **Example Usage**

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

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

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

export default App;
```

{% endtab %}

{% tab title="DailyStreakWrapper" %}

```jsx
import { QuestProvider, DailyStreakWrapper } 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 
            >
                <DailyStreakWrapper
                    userId=""
                    questId=""
                    token=""
                    metric='default_metric'
                    stepDetails={[
                        {
                            description: '',
                            title: '',
                            range: 1,
                        }
                    ]}
                    counter={ }
                    description=''
                    filledStreakImg=''
                    footerLink=''
                    footerText=''
                    pendingStreakImg=''
                    styleConfig={{
                        Count: {},
                        Description: {},
                        Form: {},
                        Footer: {},
                        Heading: {},
                        Icon: {},
                        IconBackground: {},
                        IconColor: {},
                        Label: {}
                    }}
                    uniqueEmailId=''
                    uniqueUserId=''
                    variation=''
                />
            </QuestProvider>
        </div>
    );
}

export default App;
```

{% endtab %}
{% endtabs %}

### DailyStreak Component Props

<table><thead><tr><th width="191">Prop Name</th><th width="99">Type</th><th width="138">Required</th><th>Details</th></tr></thead><tbody><tr><td><strong>userId</strong></td><td>string</td><td>required </td><td>The unique identifier of the user.</td></tr><tr><td><strong>token</strong></td><td>string</td><td>required</td><td>An authentication token or API key necessary for accessing tutorial or quest data.</td></tr><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>stepDetails</strong> </td><td>Array</td><td>required</td><td> An array of objects containing details for each step in the streak.</td></tr><tr><td><strong>metric</strong> </td><td>string</td><td>required</td><td>The metric being tracked for the streak.</td></tr><tr><td><strong>description</strong> </td><td>string</td><td>optional</td><td>Description for the streak component.</td></tr><tr><td><strong>pendingStreakImg</strong> </td><td>function</td><td>optional</td><td>Image URL for the pending streak state.</td></tr><tr><td><strong>filledStreakImg</strong> </td><td>string</td><td>optional</td><td>Image URL for the filled streak state.</td></tr><tr><td><strong>counter</strong> </td><td>string</td><td>optional</td><td>The current count for the streak.</td></tr><tr><td><strong>uniqueUserId</strong></td><td>string</td><td>optional</td><td>one unique userId for all users</td></tr><tr><td><strong>uniqueEmailId</strong></td><td>string</td><td>optional</td><td>one unique email'id for all users</td></tr><tr><td><strong>IconColor</strong></td><td>string</td><td>optional</td><td>color of icon</td></tr><tr><td><strong>Icon</strong></td><td>object</td><td>optional</td><td>manage the icon color and background color <br>e.g: ActiveBackGround,<br>InactiveBackGround,<br>ActiveColor,<br>InactiveColor</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>

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

```typescriptreact
styleConfig = {{
    Count: { },
    Description: { },
    Form: { },
    Footer: { },
    Heading: { },
    Icon: { },
    IconBackground: { },
    IconColor: { },
    Label: { }
}}
```

#### DailyStreak Component Features

* **Streak Tracking**: Displays the user's current streak for a specified metric, allowing for visual representation of progress.
* **Customization Options**: Allows customization of various visual aspects, including colors, backgrounds, and images for different streak states.
* **Metric Display**: Shows the metric being tracked alongside the streak, providing context for the user.
* **Step Details**: Provides a configurable list of step details, including titles and descriptions, for each step in the streak.

### Demo

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