storybook-react-router-dom

npmpackage.info

Gathering detailed insights and metrics for storybook-react-router-dom

Other packages similar to storybook-react-router-dom

create-vite-react-template

1.0.0

Create a React App Template with ViteJS!

cra-template-stg

4.3.0

A quick start Create React App template with React Router, Redux Toolkit, TypeScript, React Testing Library and custom ESlint configurations. As well as, Storybook, Styled Components, Emotion, Material UI, Prettier, Husky and more.

cra-template-typescript-redditech

1.1.10

The base TypeScript template for Create React App with options for storybook, moment, react-router-dom and antd (Ant Design) modules added by Redditech. Early WIP.

react-boilerplate-template-api

1.0.0

A react template with 3-tier api architecture api > hook > ui , added configurations for vite-ts redux , toolkit , persist , react-router-dom , storybook

Gathering detailed insights and metrics for storybook-react-router-dom

The StoryRouter decorator

The decorator is actually a function which wraps the Router instance. It accepts two optional arguments that you can use if you want to build a prototype of your navigation within storybook or if you need more control over the router itself.

In its default behavior the decorator just log every route action perfomed using the storybook action logger. If you are fine with the default arguments you can add globally the StoryRouter decorator, however if you need to specify some of the arguments you have to use the decorator for every story that needs it.

Usage

Suppose you have a component that uses react-router Route and Link:

1import React from 'react'; 2import { Route, Link } from 'react-router-dom'; 3 4const ChildId = ({match}) => ( 5 <div> 6 <h3>ID: {match.params.id}</h3> 7 </div> 8); 9 10const ComponentParams = () => ( 11 <div> 12 <ul> 13 <li><Link to="/accounts/netflix">Netflix</Link></li> 14 <li><Link to="/accounts/sky">Sky</Link></li> 15 </ul> 16 <Route path="/accounts/:id" component={ChildId}/> 17 </div> 18); 19 20export default ComponentParams;

you can add the StoryRouter decorator to your story this way:

1import { storiesOf } from '@storybook/react'; 2import StoryRouter from 'storybook-react-router-dom-dom'; 3 4import ComponentParams from '<your_component_path>/ComponentParams'; 5 6storiesOf('Params', module) 7 .addDecorator(StoryRouter()) 8 .add('params', () => ( 9 <ComponentParams/> 10 ));

If you want to use StoryRouter in all your stories, you can also add it globally by editing your Storybook config.js file:

1import { configure, addDecorator } from '@storybook/react'; 2import StoryRouter from 'storybook-react-router-dom'; 3 4addDecorator(StoryRouter()); 5 6// ...your config 7

The important thing is to call addDecorator before calling configure, otherwise it will not work!

StoryRouter arguments

The first argument is an object that you can use to extend the default behavior. Every time that a key in the object matches with a path Storybook will call the callback specified for the corresponding value with the destination path as argument. This way you can for example link stories together using the links addons with the linkTo function.

The match is performed using the path-to-regexp module so you can also use parameter names and regexp within the link keys.

The second argument is another object which will be forwarded to the wrapped MemoryRouter as props. This allows you to write stories having a specific url location or using advanced functionalities as asking the user confirmation before exiting from a location.

Other packages similar to storybook-react-router-dom

Other packages similar to storybook-react-router-dom

Installations

Developer Guide

No

CommonJS

15.8.0

7.5.1

Pull Requests

0

0

0

Issues

0

0

0

Releases

Unable to fetch releases

Languages

Developer

vsubbotskyy

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

storybook-router

Install

The StoryRouter decorator

Usage

StoryRouter arguments

Advanced usage and examples

Limitations

10

10

0

0

0

0

0

0

0

0

1.7

/10