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

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.

import '@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

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
    userId=""
    questId=""
    token=""
    uniqueUserId="your-unique-user-id"
>
    // children
</DailyStreak>

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

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

<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

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;

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

https://drive.google.com/file/d/1J5JIyopOuN0WQaY4Fzy2gvi3bp5kfB2y/viewdrive.google.com

PreviousChallenges Component NextLeaderboard Component

Last updated 1 year ago