This is a reusable react modal library. You can change the direction of the modal animation(slide) and design the modal.
npm
npm i simple-yummy-modal
yarn
yarn add simple-yummy-modal
import { Modal } from 'simple-yummy-modal';
// 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>;
};
It's modal's initial state. If it is false
, you can't see this modal until before clicking the trigger button.
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;
`;
You can change the direction of the modal animation (slide).
The default direction is none
.
You can change the modal's backdrop color.
Its default is rgba(0, 0, 0, 0.3)
.
You can put components(ReactNode) in the close button.
This button's default is 닫기
.
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;
}
`;
React(create-react-app)
TypeScript
Styled-components
Latest ✓ | Latest ✓ |