How to make React storybook 'addon-links' work

user_8984767 0
Viewed 1387

I am trying to use addon-links. I tried the exact simple button example listed in the documentation, https://www.npmjs.com/package/@storybook/addon-links. LinkTo react component works fine but when I use linkTo function I get "could not navigate to provided story" error. Can someone please help me with this?

import React from "react";
import { linkTo } from '@storybook/addon-links';
import LinkTo from '@storybook/addon-links/react';

export default {
  title: 'Button',
};

export const first = () => (
  <button onClick={()=>{
    // debugger;
    linkTo('Button', 'second')
  }}>Go to "Second"</button>
);

export const second = () => (
  <button onClick={linkTo('Button', 'first')}>Go to "First"</button>
);
storybook-addon-specifications storybook reactjs
1 Answers

There is a tricky part with naming. If you provide a storyName (since Storybook 6.0; previously it was story.name) for your story then you should pas it as a second argument to linkTo function call. See more complex example below:

import React from "react";
import { linkTo } from '@storybook/addon-links';

export default {
  title: 'Specs - v1/Button',
};

export const firstStory = () => (
  <button onClick={linkTo('Specs - v1/Button', 'Second story name')}>
    Go to "Second"
  </button>

);

export const second = () => (
  <button onClick={linkTo('Specs - v1/Button', 'firstStory')}>
    Go to "First"
  </button>
);
second.storyName = 'Second story name';

Also pay attention that 'linkTo' call returns a new function. So you should not wrap it with anonymous function as you did it in example:

// Wrong
<button onClick={() => linkTo('Button', 'second')}>
  Go to "Second"
</button>

// Correct
<button onClick={linkTo('Button', 'second')}>
  Go to "Second"
</button>
user_118867990
Related