@gogaille/storybook-addon-next-router

Addon to use Next.js Router in Storybook

Showing:

Popularity

Downloads/wk

0

GitHub Stars

0

Maintenance

Last Commit

5mos ago

Contributors

8

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Readme

Storybook Addon Next Router

Use Next.js Router in your Storybook stories.

This is a fork of the storybook-addon-next-router library. It fix the compatibility with next v11.2+.

Versions

  • Use storybook-addon-next-router 1.x if you're using storybook 5.x
  • Use storybook-addon-next-router 2.x if you're using storybook 6.x
  • Use @gogaille/storybook-addon-next-router 4.x if you're using storybook 6.x and next 11.2+

As a decorator in a story

import { withNextRouter } from 'storybook-addon-next-router';
import MyComponentThatHasANextLink from '../component-that-has-a-next-link';

export default {
  title: 'My Story',
  decorators: [withNextRouter], // not necessary if defined in preview.js
};

// if you have the actions addon
// you can click the links and see the route change events there
export const Example = () => <MyComponentThatHasANextLink />;

Example.story = {
  parameters: {
    nextRouter: {
      path: '/profile/[id]',
      asPath: '/profile/lifeiscontent',
      query: {
        id: 'lifeiscontent',
      },
    },
  },
};

Usage in preview.js

Simple

import { withNextRouter } from 'storybook-addon-next-router';

export decorators = [
  withNextRouter
];

Custom

import { withNextRouter } from 'storybook-addon-next-router';

export decorators = [
  withNextRouter({
    path: '/', // defaults to `/`
    asPath: '/', // defaults to `/`
    query: {}, // defaults to `{}`
    push() {} // defaults to using addon actions integration, can override any method in the router
  })
];

If you set up withNextRouter in preview, it will not need to be added to the decorators key in each story, consider doing this if you have a lot of stories that depend on Apollo.

Read more about the options available for next/router at https://nextjs.org/docs/api-reference/next/router

Example App

To see real world usage of how to use this addon, check out the example app:

https://github.com/lifeiscontent/realworld

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial