xodms0309/tami-modal

우아한테크코스 react-payments 과제를 위한 npm modal package

tami-modal 라이브러리

This is a simple modal/bottomsheet library you can use in React.

How to install

npm

npm install tami-modal

yarn

yarn add tami-modal

How to use

import

import Modal from 'tami-modal';

Props

props	value	meaning
isOpen	true, false	boolean value for modal open/close
onCloseModal	function	function for closing modal
modalLocation	center, bottom (default: center)	depends where the modal should locate

Example

import { useState } from 'react';
import Modal from 'tami-modal';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const openModal = () => {
    setIsOpen(true);
  };

  const closeModal = () => {
    setIsOpen(false);
  };

  return (
    <div className='App'>
      <button onClick={openModal}>open modal</button>
      <Modal isOpen={isOpen} onCloseModal={closeModal} modalLocation={'bottom'}>
        {/* Modal Contents that you want to pass it as a children */}
      </Modal>
    </div>
  );
}

export default App;

Contributor

Taeeun Kim