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:
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
@questlabs/react-sdk
package using npm: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
You can customize the UI with type of styleConfig would be
DailyStreak Component Usage
To use the DailyStreak
component in your React application, follow these steps:
Import the necessary components and dependencies:
Include the
DailyStreak
component within your application, passing the required and optional props:Customize the
DailyStreak
component by adjusting the props to meet your application's requirements.Utilize the
useEffect
hook to fetch data and update the component's state as needed.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