@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 属性 |