Rewire API for maximum extendability

[jonathantneal]

Replaces Stepper, defineSteps(..steps), and useStepper<typeof steps>() with defineStepper(...steps), which returns a useStepper hook automatically wired to the steps. defineStepper also returns a Scoped component, which is a provider that will lock any useStepper hooks within that component to the same steps.

Before

```tsx import { defineSteps, useStepper } from "@stepperize/react" const steps = defineSteps( { id: "first" }, { id: "second" }, { id: "third" }, { id: "last" }, ) type Steps = typeof steps const MyFirstStepper = () => { return ( ) } const MySteps = () => { const stepper = useStepper() return (

{stepper.when("first").render((step) => (

This is the {step.id}

))} {stepper.when("second").render((step) => (

This is the {step.id}

))} {stepper.when("third").render((step) => (

This is the {step.id}

))} {stepper.when("last").render(() => (

You have reached the end of the stepper

))} {!stepper.isLastStep ? (

Previous {stepper.currentStep.id === "third" ? "Finish" : "Next"}

) : (

Reset

)}

) } ```

After

```tsx import { defineStepper } from "@stepperize/react" const { useStepper } = defineStepper( { id: "first" }, { id: "second" }, { id: "third" }, { id: "last" }, ) const MyFirstStepper = () => { const stepper = useStepper() return (

{stepper.when("first", (step) => (

This is the {step.id}

))} {stepper.when("second", (step) => (

This is the {step.id}

))} {stepper.when("third", (step) => (

This is the {step.id}

))} {stepper.when("last", () => (

You have reached the end of the stepper

))} {!stepper.isLastStep ? (

Previous {stepper.when("third", "Finish", "Next")}

) : (

Reset

)}

) }

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
stepperize	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 20, 2024 1:32am

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: ef8d71ec165b799f1626d110b0508f816753eb49

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

| Name | Type | | ----------------- | ----- | | docs | Major | | @stepperize/react | Major |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR