Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@rc-component/tour

Package Overview
Dependencies
Maintainers
4
Versions
41
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rc-component/tour

React tour Component

  • 1.15.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
878K
decreased by-4.47%
Maintainers
4
Weekly downloads
 
Created
Source

@rc-component/tour

React 18 supported Tour Component.

NPM version dumi build status Codecov npm download

Development

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

Feature

  • React life cycle support tour component

Install

@rc-component/tour

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

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

TourStep

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

Keywords

FAQs

Package last updated on 30 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc