reactjs - React Hooks in globalem Decorator für Storybook aufrufen

Ich möchte einen benutzerdefinierten React-Hook für alle Stories aufrufen, bin mir jedoch nicht sicher, wo ich ihn deklarieren soll. Die benutzerdefinierten Hooks, die ich aufrufen möchte, müssen im Context-Provider sein.

Gibt es Möglichkeiten, einen Kontextanbieter und benutzerdefinierte Hooks für alle Stories zu deklarieren?

import React from 'react';
import { useCustomHooks } from './custom';
import { ThemeProvider } from 'styled-components';

export const decorators = [
  (Story) => (
    useCustomHooks() // I wanna call custom hooks here but not working because not in provider
    <ThemeProvider theme="default">
      <Story />
    </ThemeProvider>
  ),
];

Antwort #1

Ja, in .storybook/preview.js:

import { addDecorator } from '@storybook/react';

addDecorator((Story) =>
  <MotionLazyContainer>
    <ThemeProvider>
      <Story />
    </ThemeProvider>
  </MotionLazyContainer>
);