해결된 질문
작성
·
23
0
react-toastify를 사용하시는 경우 storybook에서 출력하는데 곤란함을 겪는 분들이 계실 거 같아 자문자답 올려둡니다!
package.json
"react-toastify": "^10.0.4"
"@types/react": "^18.3.12",
"@storybook/react": "^8.3.0",
.storybook/preview.tsx ( ts가 아닌 tsx )
17버전 이상이라 import React from 'react'가 안되서 아래와 같이 @jsxImportSource 추가
/** @jsxImportSource react */
import type { Preview } from '@storybook/react';
// react-toastify 관련 import
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
Modal.setAppElement('#storybook-root');
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
decorators: [
Story => (
<>
<Story />
<ToastContainer
position="bottom-right"
autoClose={3000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="light"
/>
</>
),
],
};
export default preview;
tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx",
}
}