rc-stepguide

This is a react component for step guide.

Designed to solve the prompting of specific areas in complex applications, can automatically track the prompt target through the node, and have a smooth transition animation;

This component decouples the logic related to the step guidance from the business code, and will not cause intrusive damage to the business code. You only need to set the relevant configuration;

By configuring useEffect, you can customize the active state of the tracked node. For example, the hidden target is displayed when it is guided. For details, you can view SpecialScene in the demo;

中文文档请看这里

demo

install

npm:

npm install --save rc-stepguide

yarn:

yarn add rc-stepguide

Usage

import stepGuide from 'rc-stepguide';
import 'rc-stepguide/lib/index.css';

stepGuide(stepData, setting)

API

StepGuide

| Property | Description | Type | Default | | :--- | :--- | :--- | :--- | | stepData | stepDataList | StepData | - | | setting | settings | Setting | - |

StepData

| Property | Description | Type | Default | | :--- | :--- | :--- | :--- | | element | dom selector | string | - | | title | title | ReactNode | - | | content | content | ReactNode | - | | placement | The position of the tooltip relative to the target, which can be one of top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom | string | rightTop | | useEffect | An interception after the target node is selected, some custom side effects can be performed on the target node | function（next，dom, currentData) | - |

Setting

| Property | Description | Type | Default | | :--- | :--- | :--- | :--- | | doneText | Text of the done button | ReactNode | 确定 | | nextText | Text of the next button | ReactNode | 下一步 | | showNext | Whether show next button or not | boolean | true | | prevText | Text of the prev button | ReactNode | 上一步 | | showPrev | Whether show prev button or not | boolean | false | | skipText | Text of the skip button | ReactNode | 跳过 | | showSkip | Whether show skip button or not | boolean | true | | mask | Whether show mask or not | boolean | true | | onPrev | Specify a function that will be called when a user clicks the prev button | function(currentStep) | - | | onNext | Specify a function that will be called when a user clicks the next button | function(currentStep) | - | | onOk | Specify a function that will be called when a user clicks the ok button | function | - | | onSkip | Specify a function that will be called when a user clicks the skip button | function | - |