Interest in a simple lifecycle callback system?

[atomicpages]

I recently created a simple stateful wrapper around react-joyride that allows extends the current step API with a few new options that allow users to easily "hook" into the joyride lifecycle and run side effects without boilerplate. If this is something the community wants I'd be happy to contribute! Here are the details -- let me know 😄

Option	Purpose
onLoad	runs on type === "tooltip" and allows users to run side effects before the step is rendered. Great if you need to perform some kind of action before the step is rendered like custom scrolling or clicking on something.
onNext	runs on type === "step:after" and allows users to perform some logic when next is clicked (e.g. some async action, set a cookie, etc.)
onPrevious	runs on type === "steps:before" same use case as above.
delay	delays the transition from step A to B using setTimeout, great for things like animations
depends	injects dependent step information in the onLoad, onNext and onPrevious callbacks. Great if you need data from a different step (e.g. perform a click)

import type { Step } from "react-joyride";

type OnboardingStepCallback = (
  step: Step,
  dependentStep?: Step
) => Promise<void> | void;

type OnboardingSteps = Array<
  Step & {
    /**
     * The function to execute as soon as the step loads.
     * This executes on `StepTypes.Current`
     */
    onLoad?: OnboardingStepCallback;

    /**
     * Callback to execute on `StepTypes.Next`
     */
    onNext?: OnboardingStepCallback;

    /**
     * Callback to execute on `StepTypes.Previous`
     */
    onPrevious?: OnboardingStepCallback;

    /**
     * Create dependencies between steps. Use the index of the array
     * as the reference.
     */
    depends?: number;

    /**
     * Specify a non-negative number from 0 to `n`.
     * Negative numbers, if defined, means the delay will be skipped.
     */
    delay?: number;
  }
>;

A sample use case:

export const steps: OnboardingSteps = [
  {
    target: ".foo",
    onLoad() {
      window.scroll(0, 0);
    },
    title: "Hey",
    content: "Hello",
  },
  {
    target: "[data-testid='hey']",
    depends: 0,
    delay: 500,
    onLoad(_, { target }) {
      // do something with step 0's target
    },
  },
];

[gilbarbara]

Hey @atomicpages

Sorry for the late reply.
Yes, I've been thinking about updating the lifecycle for V3, and your suggestions are great.
I'm refactoring the whole library to TypeScript and supporting the new react-floater API, but time is scarce on my side lately...

I'll try to fix some pending issues with react-floater the following weekend and get back on the migration.

[atomicpages]

Nice! Sounds great. I'd be happy to pair on v3 if you're open to it

[gilbarbara]

There's a subscription system in v3.0.0

Full migration guide: https://react-joyride.com/docs/migration
What's new: https://react-joyride.com/docs/new-in-v3

Thanks