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

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.

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

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="PRODUCTION"
>
    <DailyStreak
        // 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>
  1. Include the DailyStreak component within your application, passing the required and optional props:

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

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

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

Last updated