Data Attribute for Step

[fredericbahr]

Hey,
first of all, great library!

Is it possible to add a data attribute to a step definition allowing the consumer/user of the library to provide arbitrary data which can be accessed in the joyride callback.

I think this would simplify custom use cases like multiroute navigation or actions which should be done before/after a step.
Additionally it enables a clear sepearation of concerns and a strict place where information is defined.

In your multiroute example the navigation/routing information is defined within the callback, but each step information is defined in a separate data structure.

After the change, the callback is truly responsible for managing the tour and state of joyride but does not provide additional information for a step.

Example:

const steps: Step[] = [
  {
    target: "my-css-selector",
    title: "title",
    content: "content"
    data: {
      action: "navigate",
      link: "/my-very-unique-link/for-this-step/only"
    }
  },
  {
    target: "my-css-selector",
    title: "title",
    content: "content"
    data: {
      action: "click",
      target: "my-button-to-click-automatically"
    }
  }
]

Inside the callback one has access to the step definition (which in fact is great API-Design) and can react on the data provided.

Example:

    <Joyride
      steps={joyrideSteps}
      run={true}
      callback={(data: CallBackProps) => {
        const {step} = data

       if (step.data.action === "navigate") {
         //do navigation with step.data.link
        }
        
        if (step.data.action === "click") {
          // do automatic clicking with step.data.target
        }
      }
/>

If you need help implementing this, let me know. I will look how much spare time i can use to help you.

[gilbarbara]

Hey @fredericbahr
I've been thinking about that for some time now.
So, I added support for the data property in v2.8.1