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 integrate the DailyStreak component into your project, follow these steps:

1. Open your terminal/command prompt.

2. Navigate to your project's root directory using the cd command if you're not already there.

3. Run the following command to install the @questlabs/react-sdk package using npm:

   npm install @questlabs/react-sdk

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

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

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.

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?: {
    Form?: React.CSSProperties;
    Heading?: React.CSSProperties;
    Description?: React.CSSProperties;
    Label?: React.CSSProperties;
    Footer?: React.CSSProperties;
    Count?: React.CSSProperties;
    IconBackground?:React.CSSProperties;
}

DailyStreak Component Usage

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

1. Import the necessary components and dependencies:

import {QuestProvider},DailyStreak from "@questlabs/react-sdk";
import "@questlabs/react-sdk/dist/style.css";

 import { QuestProvider, DailyStreak } from "@questlabs/react-sdk";
 import "@questlabs/react-sdk/dist/style.css";
 
 <QuestProvider
    apiKey={apiKey}
    apiSecret="s-q*************************6"
    entityId={entityId}
    featureFlags={{}}
    apiType="STAGING"
>
    <DailyStreak
        description='your heading'
        // filledStreakImg={a1}
        // pendingStreakImg={a2}
        metric='default-metric'
        token={token}
        userId={userId}
        stepDetails={[
            {description:"This is the longest streak you’ve ever head1",title: "Confident reader",range: 3},
            {description:"This is the longest streak you’ve ever head2",title: "Responsible reader",range: 2},
            {description:"This is the longest streak you’ve ever head3",title: "Serious learner",range: 5},
            {description:"This is the longest streak you’ve ever head4",title: "Absolute reader",range: 3},
         // {description:"This is the longest streak you’ve ever head5",title: "Professional reader",range: 1},
        ]} 
        styleConfig= {{
            Form: {},
            Heading: {},
            Description: {},
            Label: {},
            Footer: {}
         }}
                   />
</QuestProvider>

2. Include the DailyStreak component within your application, passing the required and optional props:

3. Customize the DailyStreak component by adjusting the props to meet your application's requirements.

4. Utilize the useEffect hook to fetch data and update the component's state as needed.

5. By following these steps, you can seamlessly integrate and customize the DailyStreak component within your React application to provide users with a visual representation of their streaks.

---

Feel free to adjust the documentation as needed to match your specific component requirements and usage guidelines.

Demo