Storybook: How can I change a property in a stateless component?

[khmelevskii]

I have a stateless component:
<Button fired={fired} onClick={() => setState('fired': true)} />
how can I change fired property when I click on the button?

[jdelStrother]

Maybe wrap your button in a stateful component? eg:

const ButtonWrapper = React.createClass({
  render() {
     return <Button fired={fired} onClick={() => setState('fired': true)} />
  }
})

storiesOf('button', module)
  .add('', () => (<ButtonWrapper/>)

[khmelevskii]

Yes, it will work. But it would be a good idea to solve this problem using Storybook API @arunoda.

[arunoda]

@khmelevskii It's unlikely that we'll have a direct API for this, since stories needs to be static with it's data.

But, I think story linking might help you: https://github.com/kadirahq/react-storybook/blob/master/docs/writing_stories.md#linking-stories

[khmelevskii]

@arunoda Story linking won't help me if, for example, I want to show animation when I click on button.

[zvictor]

I have a similar problem where I have a chart and I want it to render different values while I am in the storybook, according to a control panel I put next to the chart component.

Being able to tell the storybook to re-render the story would solve the problem for me.

[arunoda]

May be we need to have some kind of reactive variables where we can change values. How about this:

{ storiesOf, ReactiveVar } from '@kadira/storybook';

const fired = new ReactiveVar(false);

storiesOf('Button')
  .add('simple-button', () => {
    <Button fired={fired.get()} onClick={fired.set(!fired.get())} />
  })

Once you set the value, the related story will get re-rendered again.
This can be even built completely outside of @kadira/storybook if we expose an API to reload the story.

[thebuilder]

I think you should create your own wrapper component, that handles the state in this case.

[davidnormo]

I have a similar problem. My component fires an action when the user is in the middle of a mousemove event that should result in re-rendering the component with different props. I don't think linkTo is appropriate for this right?

I think exposing an API to re-render the story would be very helpful!

[arunoda]

I think we do this via a wrapper component.

[phthhieu]

@arunoda Any idea why I can't import ReactiveVar for now?

[arunoda]

@phthhieu I assume you are referring to Meteor's ReactiveVar.
If so, that's something coming from Meteor's package system. We don't support that.
We only support NPM.

[JeronimoVallelunga-Reflektion]

@arunoda you used "ReactiveVar" as part of storybook package.

{ storiesOf, ReactiveVar } from '@kadira/storybook';

[neolivz]

Is the ReactiveVar still available in storybook 3.x? If not what is it replaced with?

[0xcaff]

ReactiveVar was a proposed solution, not something which was implemented.

[Hypnosphi]

You can try any of the two storybook-state addons:
https://github.com/Sambego/storybook-state
https://github.com/dump247/storybook-state/