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

Browser Support