Woowahan Yummy Modal Library (TS)
This is a reusable react modal library. You can change the direction of the modal animation(slide) and design the modal.
Getting started
✅ 1. Install this library.
npm
npm i woowahan-yummy-modal
yarn
yarn add woowahan-yummy-modal
✅ 2. Import this library into your file.
import Modal from 'woowahan-yummy-modal/dist/Modal';
import useModal from 'woowahan-yummy-modal/dist/useModal';
import ModalStateProvider from 'woowahan-yummy-modal/dist/ModalStateProvider';
✅ 3. Use it like this!
// Example.tsx
const Example = () => {
const { handleModalOpen, isModalOpen } = useModal();
return (
<>
<button onClick={handleModalOpen}>Trigger</button>;
{
isModalOpen ? <p>Modal is open</p> : <p>Modal is close</p>;
}
<Modal
modalStyle={modalStyle}
buttonStyle={closeButtonStyle}
closeButtonName="닫기"
direction="bottom"
>
{/* Modal Contents (ReactNode) */}
</Modal>
</>
);
};
// Parent.tsx
const Parent = () => {
return (
// You can change the initial state of the modal.
// initialState={true} (Modal is Open. You can see the modal without the trigger button click).
// initialState={false} (Modal is Close. You need to click the trigger button to see the modal).
<ModalStateProvider initialState>
<Example />
</ModalStateProvider>
// You need to set the component using the modal between ModalStateProvider.
);
};
⭐ Props
modalStyle (CSSProp)
You can design the modal.
Example
const modalStyle = css`
position: fixed;
bottom: 0; // ❗ the modal will come here
left: 50%;
z-index: 999;
transform: translateX(-50%);
max-width: 480px;
width: 100%;
height: 320px;
padding: 42px 22px 98px;
border-radius: 5px 5px 0 0;
background: #fdfdfd;
overflow: hidden;
`;
buttonStyle (CSSProp)
You can design a close button.
Example
const buttonStyle = css`
width: 100%;
position: fixed;
bottom: 32px; // ❗ the position of the close button
padding: 12px 0;
font-size: 14px;
border: 1px solid #000;
border-radius: 8px;
background: transparent;
&:hover {
background: #fefefe;
color: #333;
border: 1px solid #333;
transform: scale(1.014);
}
&:active {
bottom: 26px;
}
`;
closeButtonName (string)
You can specify the name of the close button.
direction ("top" | "right" | "center" | "left" | "bottom" | "none")
You can change the direction of the modal animation (slide).
Development Environment
React(create-react-app)
TypeScript
Styled-components
Context-api
Browser Support
Latest ✓ | Latest ✓ |