Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

storybook-react-router

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

storybook-react-router

A storybook decorator that allows you to use routing-aware components in your stories.

  • 1.0.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
53K
increased by4%
Maintainers
1
Weekly downloads
 
Created
Source

storybook-router

A Storybook decorator that allows you to use your routing-aware components.

Install

npm install --save-dev storybook-react-router

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:

import React from 'react';
import { Route, Link } from 'react-router-dom';

const ChildId = ({match}) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
);

const ComponentParams = () => (
  <div>
    <ul>
      <li><Link to="/accounts/netflix">Netflix</Link></li>
      <li><Link to="/accounts/sky">Sky</Link></li>
    </ul>
    <Route path="/accounts/:id" component={ChildId}/>
  </div>
);

export default ComponentParams;

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

import { storiesOf } from '@storybook/react';
import StoryRouter from 'storybook-react-router';

import ComponentParams from '<your_component_path>/ComponentParams';

storiesOf('Params', module)
  .addDecorator(StoryRouter())
  .add('params', () => (
    <ComponentParams/>
  ));

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

import { configure, addDecorator } from '@storybook/react';
import StoryRouter from 'storybook-react-router';

addDecorator(StoryRouter());

// ...your config

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.

Advanced usage and examples

You can find more examples in the provided stories. You can run them cloning this repository and executing (supposing you have installed globally lerna):

yarn install && yarn bootstrap
yarn storybook-react-examples

Limitations

As the wrapped Router creates a new history object for each story you cannot pass the history from a story to another one and so you cannot implement a back or forward button which works among stories.

Keywords

FAQs

Package last updated on 30 Sep 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc