Skip to content
This repository has been archived by the owner on Nov 10, 2017. It is now read-only.

Commit

Permalink
Merge pull request #11 from storybooks/10-update-linkto-documentation
Browse files Browse the repository at this point in the history
Update linkTo documentation
  • Loading branch information
shilman authored Apr 27, 2017
2 parents 16cb95e + dd80a30 commit 717d6ee
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 5 deletions.
4 changes: 0 additions & 4 deletions src/docs/react-storybook/addons/addon-gallery.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,6 @@ export default {
Also, you can think of this as a way to document events in your components.
### [Links](https://github.com/storybooks/storybook/tree/master/packages/addon-links)
With links you can link stories together. With that, you can build demos and prototypes directly from your UI components. (Like you can do with [InVision](https://www.invisionapp.com/) and [Framer.js](https://framerjs.com/))
## Third Party Addons
You need to install these addons directly from NPM in order to use them.
Expand Down
28 changes: 27 additions & 1 deletion src/docs/react-storybook/basics/writing-stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,6 @@ export default {
.add('with some props', () => (<MyComponent text="The Comp"/>));
~~~
Here we only add the decorator for the current set of stories. (In this example, we add it just for the **MyComponent** story group.)
But, you can also add a decorator **globally** and it'll be applied to all the stories you create. This is how to add a decorator like that:
Expand All @@ -107,6 +106,33 @@ export default {
}, module);
~~~
## Linking stories
With \`linkTo\` you can link stories together to build demos and prototypes directly from your UI components. (Similar to [InVision](https://www.invisionapp.com/) and [Framer.js](https://framerjs.com/))
~~~js
import { storiesOf, linkTo } from '@kadira/storybook'
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>
));
~~~
With that, you can link an event in a component to any story in the Storybook.
* First parameter is the story kind (what you named with storiesOf).
* Second parameter is the story name (what you named with .add).
You can also pass a function instead for any of above parameters. That function accepts arguments emitted by the event and it should return a string. For example:
~~~js
linkTo(() => 'Button', () => 'Second')
~~~
## Managing stories
Storybook has a very simple API to write stories. With that, you can’t display nested stories.
Expand Down

0 comments on commit 717d6ee

Please sign in to comment.