Add optional "data" to step

- update docs

docs/README.md

@@ -4,10 +4,10 @@
 
 ### Create awesome tours for your app!
 
-Showcase your app to new users or explain functionality of new features.
+Showcase your app to new users or explain the functionality of new features.
 
 It uses [react-floater](https://github.com/gilbarbara/react-floater) for positioning and styling.  
-And you can use your own components too.
+You can also use your own components.
 
 **Open the** [**demo**](https://react-joyride.com/)  
 **Open GitHub** [**repo**](https://github.com/gilbarbara/react-joyride)
@@ -50,4 +50,4 @@ export default function App() {
 }
 ```
 
-> If you need to support legacy browsers you need to include the [scrollingelement](https://github.com/mathiasbynens/document.scrollingElement) polyfill.
+> To support legacy browsers, include the [scrollingelement](https://github.com/mathiasbynens/document.scrollingElement) polyfill.

docs/accessibility.md

@@ -4,7 +4,7 @@ react-joyride aims to be fully accessible, using the [WAI-ARIA](https://www.w3.o
 
 ## Keyboard navigation
 
-When the dialog is open, the TAB key will be keep the focus on the dialog elements \(input\|select\|textarea\|button\|object\) within its contents. Elements outside the tooltip won't receive focus.
+When the dialog is open, the TAB key will keep the focus on the dialog elements (input|select|textarea|button|object) within its contents. Elements outside the tooltip will not receive focus.
 
 When the tooltip is closed the focus returns to the default.
 

docs/callback.md

@@ -75,7 +75,7 @@ export default function App() {
       // Update state to advance the tour
       setStepIndex(index + (action === ACTIONS.PREV ? -1 : 1));
     } else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
-      // Need to set our running state to false, so we can restart if we click start again.
+      // You need to set our running state to false, so we can restart if we click start again.
       setRun(false);
     }
 

docs/custom-components.md

@@ -1,9 +1,9 @@
 # Custom Components
 
-You can use custom components to have complete control of the UI. They will receive data through props and need to be a React class or forwardRef since it needs to set `ref`
+You can use custom components to have complete control of the UI. They will receive data through props and need to be a React class or forwardRef since it needs to set `ref.`
 
 {% hint style="info" %}
-If you are looking to customize the default UI, check the [styling](styling.md) docs.
+If you want to customize the default UI, check the [styling](styling.md) docs.
 {% endhint %}
 
 ## beaconComponent

docs/migration.md

@@ -1,14 +1,14 @@
 ---
 description: >-
-  If you are coming from V1 make sure to follow this guide to upgrade your
+  If you are coming from V1, make sure to follow this guide to upgrade your
   setup.
 ---
 
 # Migration
 
 ## Styling
 
-V2 uses inline styles instead of SCSS/CSS so you need to remove the imports. Check [Styling](styling.md) for more information.
+V2 uses inline styles instead of SCSS/CSS, so you must remove the imports. Check [Styling](styling.md) for more information.
 
 ## Props
 
@@ -19,7 +19,7 @@ V2 uses inline styles instead of SCSS/CSS so you need to remove the imports. Che
 **disableOverlay** `false` ▶︎ **disableOverlayClicks** `false`
 
 **keyboardNavigation** `true` ▶︎ **disableCloseOnEsc** `false`  
-the space, return and tab keys are now controlled with tabIndex
+the space, return, and tab keys are now controlled with tabIndex
 
 **scrollToSteps** `true` ▶︎ disableScrolling `false`
 
@@ -48,10 +48,10 @@ the space, return and tab keys are now controlled with tabIndex
 There are a few changes to the step syntax too:
 
 **selector** ▶︎ **target**  
-Now it supports HTMLElement and string.
+Now, it supports HTMLElement and string.
 
 **position** ▶︎ **placement**  
-The default is **bottom** now
+The default is **bottom** now.
 
 **text** ▶︎ **content**
 

docs/props.md

@@ -3,10 +3,10 @@
 The only required prop is `steps` with an array of [steps](step.md).  
 Below is the complete list of possible props and options:
 
-{% hint style="info" %} ▶︎ indicates the default value if there's one You can check the types definition for the props [here](https://github.com/gilbarbara/react-joyride/blob/main/src/types/components.ts) {% endhint %}
+{% hint style="info" %} ▶︎ indicates the default value if there's one. You can check the definition of the type for the props [here](https://github.com/gilbarbara/react-joyride/blob/main/src/types/components.ts) {% endhint %}
 
 **beaconComponent** `ElementType<BeaconRenderProps>`  
-A React component to use instead the default Beacon. Check [custom components](custom-components.md) for details.
+A React component to use instead of the default Beacon. Check [custom components](custom-components.md) for details.
 
 **callback** `() => CallBackProps`  
 A function to be called when Joyride's state changes. It returns a single parameter with the state.
@@ -27,7 +27,7 @@ Don't show the overlay.
 Don't close the tooltip when clicking the overlay.
 
 **disableScrolling** `boolean` ▶︎ **false**  
-Disable auto scrolling between steps.
+Disable autoscrolling between steps.
 
 **disableScrollParentFix** `boolean` ▶︎ **false**  
 Disable the fix to handle "unused" overflow parents.
@@ -36,7 +36,7 @@ Disable the fix to handle "unused" overflow parents.
 Options to be passed to [react-floater](https://github.com/gilbarbara/react-floater).
 
 **getHelpers** `() => StoreHelpers`  
-Get the store methods to control the tour programmatically. `prev, next, go, close, skip, reset, info`
+Get the store methods to control the tour programmatically. `prev, next, go, close, skip, reset, info`.
 
 **hideBackButton** `boolean` ▶︎ **false**  
 Hide the **Back** button.
@@ -63,7 +63,7 @@ The scroll distance from the element scrollTop value.
 Scroll the page for the first step.
 
 **showProgress** `boolean` ▶︎ **false**  
-Display the tour progress in the next button \_e.g. 2/5 \_in `continuous` tours.
+Display the tour progress in the next button, `2/5`, in `continuous` tours.
 
 **showSkipButton** `boolean` ▶︎ **false**  
 Display a button to skip the tour.
@@ -77,7 +77,7 @@ The padding of the spotlight.
 **stepIndex** `number`  
 Setting a number here will turn Joyride into `controlled` mode.
 
-You'll have to keep an internal state by yourself and update it with the events in the `callback`.
+You'll have to keep an internal state and update it with the events in the `callback`.
 
 > **Do not use this if you don't need it.**
 
@@ -89,4 +89,4 @@ Check the [step](step.md) docs for more information.
 Override the [styling](styling.md) of the Tooltip
 
 **tooltipComponent** `ElementType<TooltipRenderProps>`  
-A React component to use instead the default Tooltip. Check [custom components](custom-components.md) for details.
+A React component to use instead of the default Tooltip. Check [custom components](custom-components.md) for details.

docs/step.md

@@ -16,13 +16,16 @@ The step is a plain object that only requires two properties to be valid: `targe
 **content** `React.Node`  
 The tooltip's body.
 
+**data** `any`  
+Additional data you can add to the step.
+
 **disableBeacon** `boolean` ▶︎ **false**  
 Don't show the Beacon before the tooltip.
 
 **event** `'click' | 'hover'` ▶︎ **click**  
 The event to trigger the beacon.
 
-hideFooter `boolean` ▶︎ **false**  
+**hideFooter** `boolean` ▶︎ **false**  
 Hide the tooltip's footer.
 
 **isFixed** `boolean` ▶︎ **false**  
@@ -45,7 +48,7 @@ It can be:
 Check [react-floater](https://github.com/gilbarbara/react-floater) for more information.
 
 **placementBeacon** `string` ▶︎ placement  
-The placement of the beacon. It will use the placement if nothing is passed, and it can be: `top, bottom, left, right`.
+The beacon's placement can be top, bottom, left, or right. If nothing is passed, it will use the `placement`.
 
 **styles** `Partial<Styles>`  
 Override the [styling](styling.md) of the step's Tooltip

docs/styling.md

@@ -65,10 +65,10 @@ export default function App() {
 }
 ```
 
-You can customize the styles per step too.
+You can customize the styles per step, too.
 
 Check [styles.js](https://github.com/gilbarbara/react-joyride/blob/main/src/styles.ts) for more information.
 
-Or if you need finer control you can use you own components for the beacon and tooltip. Check the [custom components](custom-components.md) documentation.
+Or, if you need finer control, you can use your own components for the beacon and tooltip. Check the [custom components](custom-components.md) documentation.
 
 If you want to customize the arrow, check [react-floater](https://github.com/gilbarbara/react-floater) documentation.

src/types/components.ts

@@ -222,6 +222,10 @@ export type Step = Simplify<
      * The tooltip's body.
      */
     content: ReactNode;
+    /**
+     * Additional data you can add to the step.
+     */
+    data?: any;
     /**
      * Don't show the Beacon before the tooltip.
      * @default false

test/__fixtures__/CustomOptions.tsx

@@ -2,10 +2,12 @@ import { useReducer } from 'react';
 
 import { standardSteps } from './steps';
 
-import Joyride, { STATUS, Status } from '../../src';
+import Joyride, { LIFECYCLE, STATUS, Status } from '../../src';
 import { CallBackProps, Props, Step } from '../../src/types';
 
-interface CustomOptionsProps extends Omit<Props, 'run' | 'steps'> {}
+interface CustomOptionsProps extends Omit<Props, 'run' | 'steps'> {
+  finishedCallback: () => void;
+}
 
 interface State {
   index: number;
@@ -28,11 +30,14 @@ const tourSteps = [
     target: '.outro h2 span',
     placement: 'top' as const,
     content: "Text only steps — Because sometimes you don't really need a proper heading",
+    data: {
+      last: true,
+    },
   },
 ];
 
-export default function CutomOptionss(props: Omit<CustomOptionsProps, 'run' | 'steps'>) {
-  const { callback, ...rest } = props;
+export default function CustomOptions(props: Omit<CustomOptionsProps, 'run' | 'steps'>) {
+  const { callback, finishedCallback, ...rest } = props;
   const [{ run, steps }, setState] = useReducer(
     (previousState: State, nextState: Partial<State>) => ({
       ...previousState,
@@ -50,7 +55,7 @@ export default function CutomOptionss(props: Omit<CustomOptionsProps, 'run' | 's
   };
 
   const handleJoyrideCallback = (data: CallBackProps) => {
-    const { status } = data;
+    const { lifecycle, status, step } = data;
 
     if (([STATUS.FINISHED, STATUS.SKIPPED] as Array<Status>).includes(status)) {
       setState({ run: false });
@@ -59,6 +64,10 @@ export default function CutomOptionss(props: Omit<CustomOptionsProps, 'run' | 's
     setState({ index: data.index });
 
     callback?.(data);
+
+    if (lifecycle === LIFECYCLE.COMPLETE && step.data?.last) {
+      finishedCallback();
+    }
   };
 
   return (

test/tours/custom-options.spec.tsx

@@ -9,12 +9,14 @@ import { cleanup, fireEvent, render, screen, waitFor } from '../__fixtures__/tes
 const getCallbackResponse = callbackResponseFactory({ size: 4 });
 
 const mockCallback = vi.fn();
+const mockFinishedCallback = vi.fn();
 const mockGetPopper = vi.fn();
 
 describe('Joyride > Custom Options', () => {
   render(
     <Customized
       callback={mockCallback}
+      finishedCallback={mockFinishedCallback}
       floaterProps={{
         getPopper: (popper, type) => {
           mockGetPopper(popper, type);
@@ -147,5 +149,6 @@ describe('Joyride > Custom Options', () => {
     );
 
     expect(mockGetPopper).toHaveBeenCalledTimes(8);
+    expect(mockFinishedCallback).toHaveBeenCalledTimes(1);
   });
 });