Function in Props

[storybookjs]

Function in Props

[ndelangen]

Hmm, I think we could improve this by adding a toString on the action returned function:
https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Function/toString

[stramel]

This is a quick util function I wrote.

import { action as _action } from '@storybook/addon-actions'

export const action = (...args) => {
  const tempAction = _action(...args)
  tempAction.toString = () => `action('${args[0]}')`
  return tempAction
}

to use it just import the util function instead of the library function.

import { action } from './utils'

[apaatsio]

Here's an example for quick workaround for the action function:

const onClickAction = action('clicked');
onClickAction.toString = () => "action('clicked')";

storiesOf('Button', module)
  .addWithJSX('default', () => <Button onClick={onClickAction}>Hello</Button>);

The output is

<Button onClick={action('clicked')}>
  Hello
</Button>

[JasonTheAdams]

@ndelangen This has been around a bit and it would be handy to have this handled in the Storybook repo. Is there a corresponding issue or PR for this?

[hipstersmoothie]

A thing like this would have to be solved upstream via https://github.com/algolia/react-element-to-jsx-string/

[keiththomps]

@hipstersmoothie Thanks, I'll see if this is something that they'd be interested in having addressed and try to contribute a solution if they'll take it.

[FourwingsY]

addon-actions can be handled in that way. But in my case, some defaultProps (like customizable renderer props) were printed as well. And it was soo dirty(bundled by webpack).

I will set toString in my functions.

[crimx]

You can do something like this

addParameters({
  jsx: {
    functionValue: (fn: Function) => `${fn.name}()`
  }
})

[keiththomps]

This issue is pretty rough for render props. For this story:

  <ModalButton text={text("Button text", "Show Modal")} render={close => (
    <div>
      <h1>Testing w/ Render Props</h1>
      <Button onClick={close}>Close</Button>
    </div>
  )} />

The JSX addon presents this:

<ModalButton
  render={function render(close) {return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", null, "Testing w/ Render Props"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_buttons__WEBPACK_IMPORTED_MODULE_3__["Button"], {onClick: close}, "Close"));}}
  text="Show Modal"
/>

Since the render props pattern is fairly common I would think that someone has solved this for their storybooks, but I'm pretty new to storybooks and at a bit of a loss as to where I should start.

[hipstersmoothie]

🚀 Issue was released in v7.3.1 🚀