diff --git a/addons/links/README.md b/addons/links/README.md
index dcf74a2d1a0..4469bb98313 100644
--- a/addons/links/README.md
+++ b/addons/links/README.md
@@ -12,25 +12,29 @@ Install this addon by adding the `@storybook/addon-links` dependency:
yarn add -D @storybook/addon-links
```
-First configure it as an addon by adding it to your addons.js file (located in the Storybook config directory).
+within `main.js`:
```js
-import '@storybook/addon-links/register';
+module.exports = {
+ addons: ['@storybook/addon-links/register']
+}
```
Then you can import `linkTo` in your stories and use like this:
```js
-import { storiesOf } from '@storybook/react'
import { linkTo } from '@storybook/addon-links'
-storiesOf('Button', module)
- .add('First', () => (
-
- ))
- .add('Second', () => (
-
- ));
+export default {
+ title: 'Button',
+};
+
+export const first = () => (
+
+);
+export const second = () => (
+
+);
```
Have a look at the linkTo function:
@@ -45,28 +49,36 @@ 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 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.
+- First parameter is the story kind name (what you named with `title`).
+- Second (optional) parameter is the story name (what you named with `exported name`).
+ 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:
```js
-import { storiesOf } from '@storybook/react';
import { LinkTo, linkTo } from '@storybook/addon-links';
-storiesOf('Select', module)
- .add('Index', () => (
-
- ))
- .add('First', () => Go back)
- .add('Second', () => Go back)
- .add('Third', () => Go back);
+export default {
+ title: 'Select',
+};
+
+export const index = () => (
+
+);
+export const first = () => (
+ Go back
+);
+export const second = () => (
+ Go back
+);
+export const third = () => (
+ Go back
+);
```
## hrefTo function
@@ -74,16 +86,18 @@ storiesOf('Select', module)
If you want to get an URL for a particular story, you may use `hrefTo` function. It returns a promise, which resolves to string containing a relative URL:
```js
-import { storiesOf } from '@storybook/react';
import { hrefTo } from '@storybook/addon-links';
import { action } from '@storybook/addon-actions';
-storiesOf('Href', module)
- .add('log', () => {
- hrefTo('Href', 'log').then(action('URL of this story'));
+export default {
+ title: 'Href',
+};
- return See action logger;
- });
+export const log = () => {
+ hrefTo('Href', 'log').then(action('URL of this story'));
+
+ return See action logger;
+};
```
## withLinks decorator
@@ -92,14 +106,16 @@ storiesOf('Href', module)
Here is an example in React, but it works with any framework:
```js
-import { storiesOf } from '@storybook/react'
import { withLinks } from '@storybook/addon-links'
-storiesOf('Button', module)
- .addDecorator(withLinks)
- .add('First', () => (
-
- ))
+export default {
+ title: 'Button',
+ decorators: [withLinks],
+};
+
+export const first = () => (
+
+);
```
## LinkTo component (React only)
@@ -108,16 +124,18 @@ One possible way of using `hrefTo` is to create a component that uses native `a`
A React implementation of such a component can be imported from `@storybook/addon-links` package:
```js
-import { storiesOf } from '@storybook/react';
import LinkTo from '@storybook/addon-links/react';
-storiesOf('Link', module)
- .add('First', () => (
- Go to Second
- ))
- .add('Second', () => (
- Go to First
- ));
+export default {
+ title: 'Link',
+};
+
+export const first = () => (
+ Go to Second
+);
+export const second = () => (
+ Go to First
+);
```
It accepts all the props the `a` element does, plus `story` and `kind`. It the `kind` prop is omitted, the current kind will be preserved.