@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

```js | pure import Tour from '@rc-component/tour';

const Demo = () => { const createBtnRef = useRef<HTMLButtonElement>(null); const updateBtnRef = useRef<HTMLButtonElement>(null); const deleteBtnRef = useRef<HTMLButtonElement>(null); return (

<button className="ant-target" ref={createBtnRef} style={{ marginLeft: 100 }} > Create </button>

<button className="ant-target" ref={updateBtnRef}> Update </button> <button className="ant-target" ref={deleteBtnRef}> Delete </button>

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

Détail du package