Storybook addon-knobs callback function knob

Question

I have a situation in Storybook addon-knobs where I need a knob to change a callback function.

I want formatValue to be a knob but I am unsure how (and if) this can be done.

Here's the component's Story:

import { storiesOf } from '@storybook/react';
import { withKnobs, boolean, text, number, object } from '@storybook/addon-knobs';

import storybookWrapper from '../../storybook/StorybookWrapper';
import Slider from './Slider';

stories.addDecorator(withKnobs)
    .add('Slider', () => {
        const props = {
            name        : 'foo',
            value       : number('value', 200000),
            min         : number('min', 100),
            step        : number('step', 1000),
            max         : number('max', 1000000),
            // I want the below to be a knob:
            formatValue : v => '$ ' + Number(v).toLocaleString(undefined, {maximumFractionDigits:2})
        };

        const WrappedComponent = storybookWrapper(Slider, props);

        return 
    }
);

Thanks!

user_104380 · Answer

For now I "solved" it like this:
(There is still no easy way to configure the toLocaleString() part)

function formatValue(v) {
    return text('prefix', '$ ') + Number(v).toLocaleString(undefined, {maximumFractionDigits:2}) + text('suffix', '')
}

const props = {
     name        : 'loanRequest',
     value       : number('value', 200000),
     min         : number('min', 100),
     step        : number('step', 1000),
     max         : number('max', 1000000),
     formatValue
};

Storybook addon-knobs callback function knob

Here's the component's Story:

1 Answers