addon-knobs select knob with list of functions

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:

1. 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

[c-moss-talk]

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.

[gptt916]

@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?