0.0.6 • Published 12 months ago
simple-yummy-modal v0.0.6
Simple 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 simple-yummy-modal
yarn
yarn add simple-yummy-modal
✅ 2. Import this library into your file.
import { Modal } from 'simple-yummy-modal';
✅ 3. Use it like this!
// Example.tsx
const Example = () => {
const [isClicked, setIsClicked] = useState(false);
const [initialState, setInitialState] = useState(false);
const handleButtonClick = () => {
setIsClicked(true);
setInitialState(true);
};
<Button onClick={handleButtonClick}>
Trigger Button
</Button>
<Modal
openTrigger={setIsClicked}
isTriggered={isClicked}
initialState={initialState}
modalStyle={modalStyle} // CSSProp
direction='center'
backdropColor='rgba(0, 0, 0, 0.4)'
buttonContent='X'
modalButtonStyle={buttonStyle} // CSSProp
>
{/* Modal Contents (ReactNode) */}
</Modal>;
};
⭐ Props
initialState (boolean)
It's modal's initial state. If it is false
, you can't see this modal until before clicking the trigger button.
modalStyle (CSSProp)
You can design the modal.
Example
const modalStyle = css`
bottom: 0; // ❗ the modal will come here
left: 50%;
transform: translate(-50%, 0);
max-width: 480px;
width: 100%;
height: 320px;
padding: 42px 22px 98px;
border-radius: 5px 5px 0 0;
background: #fdfdfd;
overflow: hidden;
`;
direction ("top" | "right" | "center" | "left" | "bottom" | "none")
You can change the direction of the modal animation (slide). ⚠️ Caution mind the modal's location (modalStyle).
The default direction is none
.
backdropColor (string)
You can change the modal's backdrop color.
Its default is rgba(0, 0, 0, 0.3)
.
buttonContent (ReactNode)
You can put components(ReactNode) in the close button.
This button's default is 닫기
.
modalButtonStyle (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;
}
`;
Development Environment
React(create-react-app)
TypeScript
Styled-components