storybook-dark-mode
storybook-dark-mode copied to clipboard
Fix for the "Storybook preview hooks can only be called inside decorators and story functions." error
Context for a bug:
I'm using a custom decorator to set the data-theme
attribute in the html
element:
// .storybook/preview.tsx
export const decorators = [
(Story: ComponentType) => {
const isDarkMode = useDarkMode();
useEffect(() => {
document.documentElement.dataset.theme = isDarkMode ? 'dark' : 'light';
}, [isDarkMode]);
return <Story />;
},
];
When I add an interactivity to one of my components using hooks from @storybook/preview-api
, for example the useArgs
:
export const Checkbox: Story = {
args: {
selected: false,
onClick: fn(),
},
render: (args) => {
const [{ selected }, updateArgs] = useArgs();
const onClick = (id: string) => {
updateArgs({ selected: !selected });
args.onClick();
};
return <Checkbox {...args} selected={selected} onClick={onClick} />;
},
};
The bug:
Everything works properly until I switch the theme. When I switch it I'm getting an error Storybook preview hooks can only be called inside decorators and story functions.
. I need to refresh the page to see the component with styles applied from the other theme. Looks like Storybook doesn't allow to use hooks from @storybook/preview-api
when the story is nested into another component that use hooks imported directly from react
I've tested the fix on my project. Seems to fix the issue, as now I can switch themes and the components works without throwing any errors.
Versions:
Storybook: 8.0.8 storybook-dark-mode: 4.0.1