Skip to main content

Modal

The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else. Content behind a modal is inert, meaning that users cannot interact with it.

Overview​

  • Modals are positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

  • Modals are unmounted when closed.

  • Modal's "trap" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.

Examples​

Basic Message​

You Are Awesome Don't Ever Forget It ✨✨✨


import React from 'react';
import { Modal , RepopupProvider } from 'repopup';
import ReactDOM from 'react-dom';

const App = () => {
    const [
        open,
        setOpen
    ] = React.useState(false);
    return (
        <React.Fragment>
            <Button onClick={() => setOpen(true)}>Open</Button>
            <Modal
                title={`You Are Awesome Don't Ever Forget It ✨✨✨`}
                open={open}
                onRequestClose={() => setOpen(false)}
            />
        </React.Fragment>
    );
};

ReactDOM.render(
   <RepopupProvider>
    <App />
</RepopupProvider>, 
,document.querySelector('#app'));


With Title,an question icon and a text​

Do they ?

Do pilots take crash-courses ?
const [open,setOpen] = useState(false)

<Modal
  icon="question"
  title={`Do they ?`}
  open={open}
  onRequestClose={() => setOpen(false)}
  subtitle={`Do pilots take crash-courses ?`}
/>

With action​

Oops

Something went wrong,please try again ?

const [open,setOpen] = useState(false)

<Modal
  icon="error"
  title={`Oops`}
  open={open}
  onRequestClose={() => setOpen(false)}
  subtitle={`Something went wrong,please try again ?`}
  showConfirmButton
  confirmButtonText="Ok"
  onConfirm={() => setOpen(false)}
/>

With three actions​

Do you want to save the changes?


const [open,setOpen] = useState(false)

<Modal
  title={`Do you want to save the changes?`}
  open={open}
  onRequestClose={() => setOpen(false)}
  showConfirmButton
  onConfirm={() => setOpen(false)}
  confirmButtonText="Save"
  showCancelButton
  showDenyButton
  denyButtonText={`Don't Save`}
/>

Custom Positioned Modal​

It worked 💚💚💚💚💚


const [open,setOpen] = useState(false)

<Modal
  icon="success"
  open={open}
  onRequestClose={() => setOpen(false)}
  title={`It worked 💚💚💚💚💚`}
  placement="top-start"
/>

API​