DailyStreak Component

The DailyStreak component is a versatile React component designed to display and track daily streaks for a specific metric. It provides visual indicators for the user's progress and includes customiza

Component Visuals

Overview

Visual 1

Visual 2

To unlock early access to the component Get Access

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:

npm install @questlabs/react-sdk

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

Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.

---

The DailyStreakcomponent 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.

'@questlabs/react-sdk/dist/style.css'

• Import the TutorialComponent: Import the DailyStreakcomponent from the @questlabs/react-sdk package.

• Import the QuestProvider Component: Import the QuestProvider component from the @questlabs/react-sdk package.

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 DailyStreakcomponent are userId, questId, token

Replace "your-api-key" and "your-entity-id" with your actual Quest API credentials

Replace "your-token", "your-user-id", "your-questId" with your actual configuration details.

Code & Steps

QuestProvider

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;

DailyStreak

<DailyStreak
    userId=""
    questId=""
    token=""
    uniqueUserId="your-unique-user-id"
>
    // childrens
</DailyStreak>

Counter

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

Footer

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

Preview

<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>

---

Example Usage

Here's an example of how to use the Tutorialcomponent within your React application

DailyStreak

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;

DailyStreakWrapper

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;

DailyStreak Component Props

Prop Name	Type	Required	Details
userId	string	required	The unique identifier of the user.
token	string	required	An authentication token or API key necessary for accessing tutorial or quest data.
questId	string	required	The unique identifier for the tutorial or quest
stepDetails	Array	required	An array of objects containing details for each step in the streak.
metric	string	required	The metric being tracked for the streak.
description	string	optional	Description for the streak component.
pendingStreakImg	function	optional	Image URL for the pending streak state.
filledStreakImg	string	optional	Image URL for the filled streak state.
counter	string	optional	The current count for the streak.
uniqueUserId	string	optional	one unique userId for all users
uniqueEmailId	string	optional	one unique email'id for all users
IconColor	string	optional	color of icon
Icon	object	optional	manage the icon color and background color e.g: ActiveBackGround, InactiveBackGround, ActiveColor, InactiveColor
styleConfig	object	optional	An object containing CSS properties for styling various components within the tutorial process, including form, topbar, headings, descriptions, and buttons.

You can customize the UI with type of styleConfig would be

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