Walk Through Component
The WalkThrough component is used to guide users through a series of steps in a quest or tutorial. It provides a visual overlay with step-by-step instructions and can be customized to fit the specific
Last updated
The WalkThrough component is used to guide users through a series of steps in a quest or tutorial. It provides a visual overlay with step-by-step instructions and can be customized to fit the specific
Last updated
To unlock early access to the component Get Access
To integrate the WalkThrough
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.
Here's an example of how to use the WalkThrough
component in your React application:
The WalkThrough
component displays a series of steps to guide users through a quest.
It can be shown or hidden based on the isOpen
prop.
Automatically scrolls to the next target element if autoScroll is on
When the walkthrough is finished (onFinish
is called), the component becomes invisible.
You can customize the behavior of the WalkThrough
component by providing the onClose
function. If onClose
is not provided, the walkthrough will be invisible by default.
Feel free to adjust the wording or add more details as needed! If you have specific requirements or if there's anything else you'd like to include, let me know.
Prop Name | Type | Required | Description |
---|---|---|---|
onFinish
function
optional
A function to be executed when the walkthrough is finished.
onClose
function
optional
A function to be executed when the walkthrough is closed. If not provided, the walkthrough will be invisible by default.
isOpen
boolean
optional
If true, the walkthrough is visible; if false, it is hidden.
questId
string
required
The ID of the quest for which the walkthrough is being displayed.
token
string
required
An authentication token for accessing the quest data.
userId
string
required
The ID of the user for whom the walkthrough is being displayed.
backgroundColor
string
optional
Sets background color of component.
btnBackGroundColor
string
optional
Sets background color of next button.
btnColor
string
optional
Sets colour of next button.
tooltip
boolean
optional
if true tooltip will show else not
hideArrow
boolean
optional
if true arrow icon will show else not
onComplete
function
optional
Function to be executed when the walk through is completed
firstButtonText
string
optional
what should be your first button text
lastButtonText
string
optional
what should be your last button text
handleFirstButtonClick
function
optional
this functional is for handle your first action
handleLastButtonClick
function
optional
this functional is for handle your last action
Color
string
optional
Sets color of component.
actions
object of function
optional
it is an Object which contains functions where you can trigger any action when user triggers the next button ex: actions={{ 2: () => { } }} means when user clicks on next button at step 1 this function will be triggered you can perform any actions inside callback.