agcty / react-hiker

Hi there 👋

react-hiker's Issues

Find a way to enclose steps in other components (n depth)

Right now you can only do this:

<Hiker>
  <Hiker.Step id="1">My Content</Hiker.Step>
  <Hiker.Step id="2">My Content</Hiker.Step>
</Hiker>

It might be cool to be able to do this as well:

<Hiker>
  <div className="bg-green-500">
    <Hiker.Step id="1">My Content</Hiker.Step>

    <Hiker.Step id="2">My Content</Hiker.Step>
  </div>

  <Hiker.Step id="2">My Content</Hiker.Step>
</Hiker>

The question is if this is feasible and makes sense from a UX perspective.

Better branching & waypoint integration

Right now waypoints are very stupid and based on index numbers.
Maybe there is a way to make this a lot simpler and user friendly.

This is how I'd create a waypoint with 0.0.14

function Waypoints() {
  const { length, activeIndex } = useHikerContext()

  return (
    <div className="flex justify-center">
      <div className="flex space-x-3">
        {Array.from(Array(length), (e, i) => (
          <div
            className={clsx("w-2 h-2 bg-gray-400 rounded-full transition", {
              "bg-gray-400 rounded-full ring-2 ring-gray-300":
                activeIndex === i,
            })}
            key={i}
          />
        ))}
      </div>
    </div>
  )
}

There are a couple of downsides with this approach:
The active index is a number and doesn't let you jump back and forth easily, you'd first need to map the index to the step id and then call goTo(id).

It also doesn't differentiate between a branch and a "root" step, resulting in (technically correct) but confusing behaviour: some waypoints will be jumped over if you have branches in between.

I propose a new engine that only uses the step ids instead of an index and maybe has regex features that allows it to differentiate between root steps and branches. E.g 1 -> 1a / 1b -> 2

Add history of steps instead of stupidly going back

Right now the library creates a list of all children with an id to create a list for going back and forth.
For branching that is not ideal because it won't allow you to go back easily after a "step over".

Instead, it needs a history that keeps track of all the steps a user has been through.

Inject activeStep and (maybe) other values into Hiker component

This would make something like this easily possible:

<Hiker>
  {({ activeStep }) => (
    <>
      {activeStep >= 1 && <button>Back</button>}

      <Hiker.Step id="1">My Content</Hiker.Step>
    </>
  )}
</Hiker>;

This would come in handy if you i.e. wanted to only show a back button on every step except the first.

Notes

This feature should be opt-in, you don't have to use it if you don't want to and you should not need to pass a function all the time. Additionally, you would also be able to replicate a feature like this with the useHiker hook.

HeadlessUI has a nice API that is worth looking into.