react-introducer

主要用于新手引导

live demo

useage

import {Intro, getController} from 'react-introducer';
 
<Intro
 tooltip={<div>不添加则显示默认</div>}
 step={1} name="引导1">包裹需要引导的节点</Intro>
 
const controller = getController('引导1');
 
controller.start();
 

api

属性	说明	类型	默认值
name	用于处理引导的命名空间, 同一个页面可以添加多个不同name的Intro节点	string	'global'
step	用于设置step的步骤, 最小值是1	number	必填
tooltip	用于显示提示框	ReactNode	默认Tooltip
placement	提示框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom	string e.g:['top', 'left']	'top'

tooltipProps

属性	说明	类型	默认值
step	当前处于的步骤	number
count	当前介绍总步骤	number
start	开始介绍	function() => void
end	结束介绍	function() => void
goToStep	根据Intro实例跳转到指定介绍	function(step: Intro) => void
prevStep	跳转到上一步	function() => void
nextStep	跳转到下一步	function() => void
goToStepNumber	根据step跳转到指定步骤	function(step: number) => void