API Reference for React
Detailed information about NextStepjs components, props, and hooks for React applications.
NextStepReact Props
The NextStepReact component is the main component that wraps your application and provides the onboarding functionality.
| Prop | Type | Description |
|---|---|---|
| children | React.ReactNode | Your website or application content |
| steps | Tour[] | Array of Tour objects defining each step of the onboarding |
| navigationAdapter | NavigationAdapter | Optional. Router adapter for navigation (defaults to window adapter) |
| showNextStep | boolean | Controls visibility of the onboarding overlay |
| shadowRgb | string | RGB values for the shadow color surrounding the target area |
| shadowOpacity | string | Opacity value for the shadow surrounding the target area |
| cardComponent | React.ComponentType | Custom card component to replace the default one |
| cardTransition | Transition | Framer Motion transition object for step transitions |
| onStart | (tourName?: string | null) => void | Callback function triggered when the tour starts |
| onStepChange | (step: number, tourName?: string | null) => void | Callback function triggered when the step changes |
| onComplete | (tourName?: string | null) => void | Callback function triggered when the tour completes |
| onSkip | (step: number, tourName?: string | null) => void | Callback function triggered when the user skips the tour |
| clickThroughOverlay | boolean | If true, overlay background is clickable, default is false |
| disableConsoleLogs | boolean | Optional. If true, console logs are disabled, default is false |
| scrollToTop | boolean | Optional. If true, the page will scroll to the top when the tour starts, default is true |
| noInViewScroll | boolean | Optional. If true, the page will not scroll to the target element when it is in view, default is false |
Step Object
Each step in a tour is defined by a Step object with the following properties:
| Property | Type | Description |
|---|---|---|
| icon | React.ReactNode | string | null | An icon or element to display alongside the step title |
| title | string | The title of your step |
| content | React.ReactNode | The main content or body of the step |
| selector | string | Optional. A string used to target an `id` that this step refers to |
| side | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom" | "right-top" | "right-bottom" | Optional. Determines where the tooltip should appear relative to the selector |
| showControls | boolean | Optional. Determines whether control buttons should be shown if using the default card |
| showSkip | boolean | Optional. Determines whether skip button should be shown if using the default card |
| blockKeyboardControl | boolean | Optional. Determines whether keyboard control should be blocked |
| pointerPadding | number | Optional. The padding around the pointer highlighting the target element |
| pointerRadius | number | Optional. The border-radius of the pointer highlighting the target element |
| nextRoute | string | Optional. The route to navigate to when moving to the next step |
| prevRoute | string | Optional. The route to navigate to when moving to the previous step |
| viewportID | string | Optional. The id of the viewport to target. Used with NextStepViewport component. |
Tour Object
NextStepjs supports multiple tours, each defined by a Tour object:
| Property | Type | Description |
|---|---|---|
| tour | string | The unique identifier for this tour |
| steps | Step[] | Array of Step objects defining each step of this tour |
useNextStep Hook
The useNextStep hook provides programmatic control over the tour. You can use it to start, stop, skip, or navigate through steps.
| Property | Type | Description |
|---|---|---|
| startNextStep | (tourName: string) => void | Starts the specified tour |
| closeNextStep | () => void | Stops the current tour |
| currentTour | string | null | The name of the current tour |
| currentStep | number | The current step index |
| setCurrentStep | (step: number, delay?: number) => void | Sets the current step index with optional delay |
| isNextStepVisible | boolean | Whether the tour overlay is currently visible |