@rc-component/tour

React 18 supported Tour Component.

Development

npm install
npm start
open http://localhost:8000

Feature

• React life cycle support tour component

Install

Usage

import Tour from '@rc-component/tour';

const Demo = () => {
    const createBtnRef = useRef<HTMLButtonElement>(null);
    const updateBtnRef = useRef<HTMLButtonElement>(null);
    const deleteBtnRef = useRef<HTMLButtonElement>(null);
    return (
        <div style={{ margin: 20 }}>
            <div>
                <button
                    className="ant-target"
                    ref={createBtnRef}
                    style={{ marginLeft: 100 }}
                >
                    Create
                </button>
                <div style={{ height: 200 }} />
                <button className="ant-target" ref={updateBtnRef}>
                    Update
                </button>
                <button className="ant-target" ref={deleteBtnRef}>
                    Delete
                </button>
            </div>

            <div style={{ height: 200 }} />

            <Tour
                defaultCurrent={0}
                steps={[
                    {
                        title: '创建',
                        description: '创建一条数据',
                        target: () => createBtnRef.current,
                        mask: true,
                    },
                    {
                        title: '更新',
                        description: (
                            <div>
                                <span>更新一条数据</span>
                                <button>帮助文档</button>
                            </div>
                        ),
                        target: () => updateBtnRef.current,
                    },
                    {
                        title: '删除',
                        description: (
                            <div>
                                <span>危险操作：删除一条数据</span>
                                <button>帮助文档</button>
                            </div>
                        ),
                        target: () => deleteBtnRef.current,
                        mask: true,
                        style: { color: 'red' },
                    },
                ]}
            />
        </div>
    );
};

export default Demo;

🔥 API

We use typescript to create the Type definition. You can view directly in IDE. But you can still check the type definition here.

Tour

属性	类型	默认值	说明
closeIcon	React.ReactNode	-	自定义关闭按钮
steps	TourStepProps[]	-	引导步骤
open	boolean	true	受控打开引导（与 current 受控分开）
current	number	0	受控当前处于哪一步
defaultCurrent	number	0	默认处于哪一步
gap	{ offset?: number | [number, number]; radius?: number }	-	控制引导显示间距
onChange	(current: number) => void	-	步骤改变时的回调，current为改变前的步骤，next为改变后的步骤
onClose	(current: number) => void	-	关闭引导时的回调
onFinish	() => void	-	完成引导时的回调
mask	boolean | { style?: React.CSSProperties; color?: string; }	true	整体是否启用蒙层，也可以传入自定义样式修改蒙层样式
animated	boolean | { placeholder: boolean }	false	是否启用目标遮罩动画
arrow	boolean | { pointAtCenter: boolean}	true	整体是否显示箭头，包含是否指向元素中心的配置
scrollIntoViewOptions	boolean | ScrollIntoViewOptions	true	是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数
onPopupAlign	function(popupDomNode, align)	-	当弹出框对齐后回调
zIndex	number	1001	弹层的层级

TourStep

属性	类型	默认值	说明
closeIcon	React.ReactNode	-	自定义关闭按钮
target	() => HTMLElement | HTMLElement	-	获取引导卡片指向的元素
arrow	boolean | { pointAtCenter: boolean}	true	是否显示箭头，包含是否指向元素中心的配置
placement	left | leftTop | leftBottom | right | rightTop | rightBottom | top | topLeft | topRight | bottom | bottomLeft | bottomRight	bottom	引导卡片相对于目标元素的位置
onClose	() => void	-	关闭引导时的回调函数
mask	boolean | { style?: React.CSSProperties; color?: string; }	true	是否启用蒙层，也可以传入自定义样式修改蒙层样式，默认跟随 Tour 的 mask 属性
renderPanel	(props: TourStepProps, current: number) => ReactNode;		渲染 popoup 弹窗方法
className	string	-	-
style	React.CSSProperties	-	-
scrollIntoViewOptions	boolean | ScrollIntoViewOptions	true	是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 scrollIntoViewOptions 属性