add <Activity> example

[lockr7]

Description

Update to docs to show an example using React's new component (had to update to Next 16 because that's the version that includes React 19.2 where is added)

Related Issues

• Issue: #153

Checklist

Please review the following checklist before submitting the pull request:

• My code follows the code style of this project.
• I have added tests to cover my changes.
• All new and existing tests passed.
• I have updated the documentation (if necessary).
• I have checked the build and it works as expected.

Screenshots (if appropriate)

Additional Notes

[changeset-bot]

⚠️ No Changeset found

Latest commit: c965efe

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[vercel]

@lockr7 is attempting to deploy a commit to the Damián Ricobelli's projects Team on Vercel.

A member of the Team first needs to authorize it.

[damianricobelli]

Please, don't update the next package to the beta version

[lockr7]

I don't believe Next 16 has been released yet and afaik this is the version that React 19.2 is included in which is when Activity is introduced.

Totally fine if you don't merge while it's still in beta but just wanted to get this PR open.

If you're aware of a lower version of Next that includes React 19.2, happy to downgrade.

[damianricobelli]

The library does not depend on NextJS, so I think you could use the Activity API without any issues because the react version in the repo is the new one. I haven't tested it yet, but I don't think you'll have any problems.

[lockr7]

Hmm, unfortunately I get this error when it's a lower next version. When I log React.version you can see 19.2.0-canary-0bdb9206-20250818 logged so it's possible the 19.2.0 set in the catalog is not getting resolved correctly

[damianricobelli]

Hmm yea I see. Well, in that case I wonder if we can just document this use case without a preview and just add a sub section in the hook docs: https://stepperize.vercel.app/docs/react/api-references/hook#rendering-methods

Would be great to have a live preview, but I don’t like the idea of use a very early beta version of NextJS affecting all the docs app. This could generate otros unexpected issues in other libraries related to fumadocs

[lockr7]

Sorry haven't had time to get back to this. Saw the new version of next and fumadocs is stable release. Would you want to hold this PR until that's upgraded?

[damianricobelli]

You can achieve this in a simpler way, like

const Wrapper = () => {
  const { current } = useStepper();

  return (
    <>
      {steps.map((stepId) => (
        <React.Activity
          key={stepId}
          mode={current.id === stepId ? "visible" : "hidden"}
        >
          <Content id={current.id} />
        </React.Activity>
      ))}
    </>
  );
};

Getting the steps from the defineStepper instance

[lockr7]

ah ya fair callout, originally it was rendering a different component for each step but simplified it to use the basic component