T
TanStack•16mo ago
sensitive-blue

Routing using Mantine UI's Stepper component

Hey there! I am trying to use Mantine UI Stepper component with TSR+TSQ and was curious what the best approach to go about this would be. Should I render an outlet in each of the stepper step's and somehow calculate the active step number based on the current route? Where would I want to keep the state of each step along the way? Should I use a react context or can I utilize TSR+TSQ for state management? The full state of all the steps is stored server side but it is spread out over many endpoints per step. I have created a stackblitz sandbox showing what I have so far (with business logic redacted). https://stackblitz.com/edit/tanstack-router-gztxfg?file=src%2Froutes%2Fsteps.tsx The 3 main issues I am trying to solve right now are listed in the readme file: 
- [ ] Fix `<Stepper active{getCurrentStepNumber()}>` not getting the current step number
  - Can `staticData` be used the simplify this? How can I propegate child route data to a parent route?
  - Should we use `matches` for this? Similar to how the docs show breadcrumbs.
- [ ] Figure out a way to prevent users from navigating to a step if any of the prior steps are incomplete or invalid
  - Should we use `staticData` or `matches` for this somehow?
- [ ] Figure out how to move the `Back` and `Next` buttons into the `steps.tsx` layout instead of being in every route
- [ ] Fix `<Stepper active{getCurrentStepNumber()}>` not getting the current step number
  - Can `staticData` be used the simplify this? How can I propegate child route data to a parent route?
  - Should we use `matches` for this? Similar to how the docs show breadcrumbs.
- [ ] Figure out a way to prevent users from navigating to a step if any of the prior steps are incomplete or invalid
  - Should we use `staticData` or `matches` for this somehow?
- [ ] Figure out how to move the `Back` and `Next` buttons into the `steps.tsx` layout instead of being in every route
Any help or suggestions on how I can fix/improve my sample would be greatly appreciated! 🙂
Stepper | Mantine
Display content divided into a steps sequence
Christopher Haws
StackBlitz
TanStack Mantine Stepper - StackBlitz
Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz
3 Replies
sensitive-blue
sensitive-blueOP•16mo ago
I've simplified the stackblitz example from our real app as much as I could. In the real app each step could have paginated lists with search/query params, forms with validation, etc. I hope my explanation of what I am trying to achieve makes sense.
eastern-cyan
eastern-cyan•16mo ago
The problem in your example is that route context does not go upwards, its always flowing downwards. This may be a good time to use React's context instead to around the steps.tsx route to cover both it and its children. Or ofc, an external solution like jotai or zustand.
sensitive-blue
sensitive-blueOP•16mo ago
Ok. Our current implementation does use react context around the "steps" route. I was hoping to push it higher up into the router though so that the routing logic could determine which step the user should be on based on the current state of the workflow. Right now we are calculating that logic in a hook and then using the <Navigate /> component to reroute the user. I was trying to come up with a way to have the router handle that instead of it happening as a side-effect during the render phase. I think, like you mention, the issue is that I would need that state to live outside of react's lifecycle. I did at one point try using tanstack's state library to move the step state outside of react, but I couldn't quite get it working right.

Did you find this page helpful?