Storybook: addon-knobs select knob with list of functions

Created on 15 Feb 2019 · 5Comments · Source: storybookjs/storybook

Describe the bug
I have a component that is passed a function as a prop that determines how the component behaves under certain CSS breakpoints. There is a finite list of functions that can be passed, one for each site breakpoint in fact. When I pass an object of functions they are not rendered in the dropdown
To Reproduce
Steps to reproduce the behavior:

Create a select knob for a prop like so

select('Disable From', { fromExtraLarge: () => null })

Expected behavior
'Disable From' to appear in the dropdown list

System:

OS: MacOS
Device: Macbook Pro 2018
Browser: chrome
Framework:react
Addons: addon-knobs
Version: 4.1.11

knobs feature request has workaround

Source

stubar

Most helpful comment

There's a way you can accomplish this:

const onChangeDict = {foo: console.log('foo'), bar: console.log('bar'}}
const onChange = select('onChange', ['foo', 'bar']);
return <Input onChange={onChangeDict[onChange]}

It would be nice to display function signatures though. It's common to have function props so I'd like to work toward a way to support them as their own knob type; however, my search hasn't found much in the issues.

c-moss-talk on 16 Feb 2019

👍2

All 5 comments

There's a way you can accomplish this:

const onChangeDict = {foo: console.log('foo'), bar: console.log('bar'}}
const onChange = select('onChange', ['foo', 'bar']);
return <Input onChange={onChangeDict[onChange]}

c-moss-talk on 16 Feb 2019

👍2

@c-moss-talk I think this is a good workaround. Happy to review a PR if you want to build something like this, though it feels like an edge case to me tbh.

shilman on 18 Feb 2019

@c-moss-talk this is a good idea, my work around involved a wrapper div with a render prop but I think this is neater.

stubar on 18 Feb 2019

Closing for now, feel free to re-open for more discussion!

shilman on 18 Feb 2019

@shilman

I'm also interested in a knob that displays function signatures. I am in the process of building a reusable library and quite a few of them require some sort of callback as a prop, it would be nice if it could be included with the rest of the props in the knobs tab to show potential users what to expect, right there in the same page.

Currently I have left the functions out of the knobs tab and are replying on a readme for users to understand what callbacks to provide to the component.

Maybe something simple that signifies the prop is a function, and I could provide the signature to be displayed, and the field will be there to inform users that this is a prop for the component?