noah-modal v2.0.15
noah-modal
๐ณ ๋ชจ๋ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ง๋ค๊ธฐ
noah-modal
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ฐ์ํํ
ํฌ์ฝ์ค 5๊ธฐ์ ๋ ๋ฒจ2 ๋ฏธ์
์๊ตฌ์ฌํญ ์ค ํ๋๋ก ๊ธฐ์กด ๋ฏธ์
์์ ์ฌ์ฉํ๋ ๋ชจ๋ฌ์ ๋ถ๋ฆฌํ์ฌ npm์ผ๋ก ๋ฐฐํฌํ๊ณ , ๊ทธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ง์ importํด์ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ชฉํ์
๋๋ค.
๐๏ธ ๋ชฉ์ฐจ
๐ ์ค์น
๐ ์ฌ์ฉ๋ฒ
๐ฅ ์์ ์์ ๋ณด๊ธฐ
๐จโ๐ป ๋ง๋ ์ด
๐ ์ค์น
npm
๋๋ yarn
์ ์ฌ์ฉํ์ฌ ์ค์นํ ์ ์์ต๋๋ค.
$ npm install noah-modal
$ yarn add noah-modal
๐ ์ฌ์ฉ๋ฒ
noah-modal
์ ModalProvider
์ useModal
๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ฌ์ ๋ฑ๋กํ๊ณ ๋ชจ๋ฌ์ ์ด๊ณ ๋ซ์ ์ ์์ต๋๋ค.
1๏ธ. ModalProvider๋ก ๋ชจ๋ฌ ๋ฑ๋กํ๊ธฐ
๋ค์๊ณผ ๊ฐ์ด src/index.tsx
์ ModalProvider
๋ฅผ ๋ฑ๋กํ์ธ์.
// NoahModal.tsx
const NoahModal = () => {
return <div>๋
ธ์ ๋ชจ๋ฌ์
๋๋ค.</div>;
};
export default NoahModal;
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ModalProvider } from 'noah-modal'; // noah-modal ๋ถ๋ฌ์ค๊ธฐ
import App from './App';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<ModalProvider
modals={[
{
title: 'noah modal',
component: <NoahModal />,
name: 'myModal',
delayMsTime: 500,
},
]}
>
<App />
</ModalProvider>
</React.StrictMode>
);
ModalProvider
๋ modal
์ ๋งค๊ฐ๋ณ์๋ก ๋ฐ์ต๋๋ค. modal
์ ๋ฐฐ์ด์ด๋ฉฐ ์ฑ์ ๋ฑ๋กํ๊ณ ์ ํ๋ ๋ชจ๋ฌ์ ์์๋ก ๊ฐ์ง๋๋ค. ๊ฐ ์์๋ ๋ค์๊ณผ ๊ฐ์ ์์ฑ์ ๊ฐ์ง๋๋ค.
key | value type | ํ์์ธ๊ฐ์? | ๊ธฐ๋ณธ๊ฐ | ์ค๋ช |
---|---|---|---|---|
title | string | yes | - | ๋ชจ๋ฌ์ ์ ๋ชฉ์ ๋๋ค. |
component | JSX.Element | yes | - | ๋ชจ๋ฌ ๋ด ์ปจํ ์ธ ์ ๋๋ค. |
name | string | yes | - | ๋ชจ๋ฌ ์ด๋ฆ์ ๋๋ค. ํด๋น ๊ฐ์ ๋ชจ๋ฌ์ ์ด๊ณ ๋ซ์ ๋ ์ฌ์ฉ๋๋ ๊ฐ์ ๋๋ค. |
isAbleBackdropClick | boolean | no | true | ๋ชจ๋ฌ ๋ฐ ๋ฐฐ๊ฒฝ์ ํด๋ฆญํ์ ๋, ๋ชจ๋ฌ์ ๋ซ์์ง ๋ซ์ง ์์์ง์ ๋ํ ์ฌ๋ถ์ ๋๋ค. |
delayMsTime | number | no | 0 | ๋ชจ๋ฌ์ด ์ด๊ณ ๋ซ์ ๋ ๊ฑธ๋ฆฌ๋ ์๊ฐ(ms)์ ๋๋ค. ํด๋น ๊ฐ์ ์ค์ ํ๋ฉด ์ ๋๋ฉ์ด์ ํจ๊ณผ๊ฐ ๋ํ๋ฉ๋๋ค. |
2. useModal์ Modal๋ก ๋ชจ๋ฌ ์์น ์ ํ๊ธฐ
๋ณดํต ํ๋์ ์ฑ์์ ํ๋์ ๋ชจ๋ฌ์ด ์กด์ฌํฉ๋๋ค. ๋๋ฌธ์ ModalProvider
๋ณด๋จ ํ์ ์ปดํฌ๋ํธ์ ๊ทธ๋ฆฌ๊ณ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ค ๋ณด๋จ ์์ ์ปดํฌ๋ํธ์ Modal
์ ์์น๋ฅผ ์ ํ๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค.
๋ค์์ ์ ์ญ์ ์ผ๋ก ํ์ํ ๊ฒ๋ค์ ์ค์ ํ๋ ๊ณณ์ธ App.tsx
์ Modal
์ ์์น๋ฅผ ์ ํ ์์์
๋๋ค.
import { useModal } from 'noah-modal'; // noah-modal ๋ถ๋ฌ์ค๊ธฐ
import { Outlet } from 'react-router-dom';
import GlobalStyle, { GlobalLayout } from 'styles/globalStyle';
function App() {
const { Modal } = useModal(); // useModal ํ
์ ํตํด ๋๋๋ง์ ํ Modal ๊ฐ์ ธ์ค๊ธฐ
return (
<>
<GlobalStyle />
<GlobalLayout>
<Outlet />
{Modal && <Modal />}
</GlobalLayout>
</>
);
}
export default App;
3๏ธ. useModal์ openModal๋ก ๋ชจ๋ฌ ์ด๊ธฐ
openModal
ํจ์๋ฅผ ํตํด ๋ชจ๋ฌ์ ์ด ์ ์์ต๋๋ค. ๋งค๊ฐ๋ณ์๋ก๋ ์์ ๋ฑ๋กํ ๋ชจ๋ฌ์ name
์ ์ ๋ฌํฉ๋๋ค.
import { useModal } from 'noah-modal';
function Home() {
const { openModal } = useModal();
const handleClickButton = () => {
openModal('noahModal'); // ๋ชจ๋ฌ ์ด๊ธฐ
};
return (
<div>
<button onClick={handleClickButton}>๋
ธ์ ๋ชจ๋ฌ ์ด๊ธฐ</button>
</div>
);
}
export default Home;
4๏ธ. useModal์ closeModal๋ก ๋ชจ๋ฌ ๋ซ๊ธฐ
closeModal
ํจ์๋ฅผ ํตํด ๋ชจ๋ฌ์ ๋ซ์ ์ ์์ต๋๋ค. openModal
๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ๋งค๊ฐ๋ณ์๋ก name
์ ์ ๋ฌํฉ๋๋ค.
// NoahModal.tsx
import { useModal } from 'noah-modal';
function NoahModal() {
const { closeModal } = useModal();
return (
<div>
<div>๋
ธ์ ๋ชจ๋ฌ์
๋๋ค.</div>
<button onClick={() => closeModal('noahModal')}>๋ชจ๋ฌ ๋ซ๊ธฐ</button>
</div>
);
}
export default NoahModal;
๐ฅ ์์ ์์ ๋ณด๊ธฐ
๋ค์์ ๋
ธ์ ๋ชจ๋ฌ
์ด ์ด๊ณ ๋ซ๋ ๋ชจ์ต์ ๋ํ๋ธ ์์์
๋๋ค.
๐จโ๐ป ๋ง๋ ์ด
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago