React-Modal

🎉 React-Modal allows you to add modals to your app with ease. No more nonsense!

Installation

$ npm install --save @wargas/react-modal
$ yarn add @wargas/react-modal

Features

• Easy to set up for real, you can make it work in less than 10sec!
• Super easy to customize
• Swipe to close 👌
• Can choose swipe position
• Can display a react component inside the modal!
• Can remove a modal programmatically
• Define behavior per toast
• And much more !

The gist

  import React from 'react';
  import FirstModal from './FirstModal'

  import { ContainerModal, modal } from '@wargas/react-modal';
  import '@wargas/react-modal/dist/index.css';
  
  function App(){
    const open = () => modal(FirstModal, {title: 'My Title', size: 'sm', position:'center'});

    return (
      <div>
        <button onClick={open}>Open Modal!</button>
        <ContainerModal />
      </div>
    );
  }

  export function FirstModal() {
  const {
    close,
    setTitle,
    setSize,
    setPosition,
    options: { data, title },
  } = useModal();

  return (
    <div className="p-5">
        ...
    </div>
  );
}

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! Take a look at the contributing guide.

License

Licensed under MIT