-
-
Notifications
You must be signed in to change notification settings - Fork 9.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow Promise based Decorators & Async Storybook components #10467
Comments
It's sort of tricky in React because the story function is implicitly a SFC (i.e. a function that returns a React element). They aren't allowed to be async by the rules of React (see error above). We could not render them with React but then React hooks wouldn't work inside stories or decorators. We discussed the possibility of having a parameter, maybe something like: export const basicForm = async () => {
const { data } = await asyncDataCall()
return <Form data={data} />
}
basicForm.story = { parameters: { react: { async : true } } } Where if you passed that parameter you would be allowed to return a promise from the story function, but it would no longer be allowed to use hooks. Any thoughts about that @webberwang? |
My use case is for adding dynamically selected decorators. So if I don't see a fully dynamic way to do this. The solution I'm going to pursue is importing all existing decorators, then using a map to select from them. Not as pretty, but better than nothing. |
I have the exact same scenario - have a decorator who needs to run an async function to get its values and want to pass the values from the response into a component decorator. Looking for support to be able to do something similar to:
|
If I'm following correctly, looks like this should be potentially solved with in: https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.23!? |
decorators and loaders are different |
Is your feature request related to a problem? Please describe.
I can't load async data to my Storybook without resorting some hacky solution proposed by some other Storybook issues relating to Promise/Async.
Describe the solution you'd like
Will throw
Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
or
Will also throw an error
Describe alternatives you've considered
Loading using a render prop component #696
Hacky solution using
useEffect
&useState
in this issue. Basically add the promise insideuseEffect
, and keep a state counter to see if data has been loaded. #1670, but still has issues.Are you able to assist bring the feature to reality?
not at the moment
The text was updated successfully, but these errors were encountered: