@storybook/addon-links

What is @storybook/addon-links?

The @storybook/addon-links package allows you to create links between your stories in Storybook. This can be used to navigate from one story to another, simulating user flows and providing a more connected and interactive experience when showcasing components.

What are @storybook/addon-links's main functionalities?

Link to another story

This feature allows you to create a link that navigates to a different story within Storybook. The 'linkTo' function takes two arguments: the first is the name of the component (or 'kind' in Storybook terminology), and the second is the specific story name. When the element is clicked, Storybook will navigate to the specified story.

{"<MyButton onClick={linkTo('Button', 'secondary')}>Next Story</MyButton>"}

Link with parameters

This feature extends the basic linking functionality by allowing you to pass additional parameters to the target story. These parameters can be used within the target story to modify its state or display certain data, making it a powerful tool for creating interactive and dynamic story flows.

{"<MyButton onClick={linkTo('Button', 'secondary', { userId: '12345' })}>User Profile</MyButton>"}

Other packages similar to @storybook/addon-links

@storybook/addon-actions

The @storybook/addon-actions package can be used to log actions performed on UI components within Storybook. While it doesn't provide direct linking between stories like @storybook/addon-links, it is often used in conjunction with links to provide a more interactive storytelling experience.

@storybook/addon-knobs

The @storybook/addon-knobs package allows you to add dynamic variables to your stories in Storybook. Similar to @storybook/addon-links, it enhances the interactivity of stories by allowing users to manipulate props in real-time. However, it does not provide functionality for linking between stories.

README

Story Links Addon

---

The Storybook Links addon can be used to create links that navigate between stories in Storybook.

This addon works with Storybook for:

• React
• React Native
• Vue

Getting Started

Install this addon by adding the @storybook/addon-links dependency:

yarn add @storybook/addon-links

First configure it as an addon by adding it to your addons.js file (located in the Storybook config directory).

import '@storybook/addon-links/register';

Then you can import linkTo in your stories and use like this:

import { storiesOf } from '@storybook/react'
import { linkTo } from '@storybook/addon-links'

storiesOf('Button', module)
  .add('First', () => (
    <button onClick={linkTo('Button', 'Second')}>Go to "Second"</button>
  ))
  .add('Second', () => (
    <button onClick={linkTo('Button', 'First')}>Go to "First"</button>
  ));

Have a look at the linkTo function:

import { linkTo } from '@storybook/addon-links'

linkTo('Toggle', 'off')
linkTo(() => 'Toggle', () => 'off')
linkTo('Toggle') // Links to the first story in the 'Toggle' kind

With that, you can link an event in a component to any story in the Storybook.

• First parameter is the the story kind name (what you named with storiesOf).
•   Second (optional) parameter is the story name (what you named with .add). If the second parameter is omitted, the link will point to the first story in the given kind.

You can also pass a function instead for any of above parameter. That function accepts arguments emitted by the event and it should return a string.
Have a look at PR86 for more information.