reactjs - לקרוא Hooks של React בדקורטור גלובלי עבור Storybook


אני רוצה לקרוא hook מותאם אישית של React עבור כל הסיפורים, עם זאת, אני לא בטוח איפה להצהיר. ה-hooks המותאמים אישית שאני רוצה לקרוא חייבים להיות במספק הקונטקסט.

האם יש דרכים להצהיר על ספק הקשר ו-Hooks מותאמים אישית לכל הסיפורים?

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>
  ),
];

תשובה #1

כן, בקובץ .storybook/preview.js:

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

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