Replies: 1 comment
-
Are you asking if the function can be called after it has been passed to your component or is the function initialized with those values? I don't think your example is valid js, because I am pretty sure arguments can't start with a number and you specify they are values. So, it is a little hard to tell how the function gets or uses those values. Depending on your framework and what you want, there may be different solutions. If you can initialize the function, with those values, then I would look at the You specified not having the user edit the function, but I will provide a potential solution, if the function is allowed to be changed by the program. There are probably other solutions, but more information would be needed. My solution will assume you can wrap a function, with those inputs, but if you can't then more info will be needed about what you are actually doing and can or can't have happen. const baseScaleFunction = (input1,input2) => { /* something cool */ }
const MyStory = {
render: (args) => {
// If something like this is acceptable then you just need to handle
// passing the input to your component, in the return, but that
// depends on your framework.
const scaleFunction = () => baseScaleFunction(args.val1, args.val2)
return /* The return depends on your framework. */
},
args: {
val1: 0,
val2: 100,
},
argTypes: {
val1: { even: { control: { type: 'number', min: 1, max: 30, step: 2 } } },
val2: { even: { control: { type: 'number', min: 1, max: 30, step: 2 } } },
},
} |
Beta Was this translation helpful? Give feedback.
-
Summary
I need to pass a function for one of my args and I want the user to be able to set the different parameters that I am setting in the helper function
for example:
const scaleFunction = (0,100) => { /* something cool */ }
args: { scale: scaleFunction }
is there a way the user using storybook can set the 0, 100 values without having to edit the function?
You might ask why I am passing the entire function instead of just the two data points in our component and it's because the helper function is not ours, it is from the framework we are using and so we pass it as a prop to the component.
Additional information
No response
Create a reproduction
No response
Beta Was this translation helpful? Give feedback.
All reactions