LOGO

Usage

How to usage


import React, { useState } from "react";
import { Modal } from "react-beautiful-modals";


const App = () => {
 const [open, setOpen] = useState(false);


 return (
   <Modal open={open} onClose={() => setOpen(false)}>
     <h1>Your content here</h1>
   </Modal>
 );
};


export default App;

This is a Modal Title

Please review the details of your action before confirming. This operation is crucial and cannot be reversed once executed. Ensure that all information presented is accurate and aligns with your intentions. By proceeding, you acknowledge that you accept full responsibility for this change.


import React, { useState } from "react";
import {
 Modal,
 ModalCancelButton,
 ModalDescription,
 ModalFooter,
 ModalHeader,
 ModalSuccessButton,
 ModalTitle,
} from "react-beautiful-modals";


const App = () => {
 const [open, setOpen] = useState(false);


 return (
   <Modal open={open} onClose={() => setOpen(false)}>
     <ModalHeader>
       <ModalTitle>This is modal title</ModalTitle>
     </ModalHeader>
     <ModalDescription>This is modal Description</ModalDescription>
   </Modal>
 );
};


export default App;

This is a Modal Title

Provide a concise and informative description that effectively communicates the purpose of the modal to the user.


import React, { useState } from "react";
import {
 Modal,
 ModalCancelButton,
 ModalDescription,
 ModalFooter,
 ModalHeader,
 ModalSuccessButton,
 ModalTitle,
} from "react-beautiful-modals";


const App = () => {
 const [open, setOpen] = useState(false);


 return (
   <Modal open={open} onClose={() => setOpen(false)}>
     <ModalHeader>
       <ModalTitle>This is modal title</ModalTitle>
     </ModalHeader>
     <ModalDescription>This is modal Description</ModalDescription>
   </Modal>
 );
};


export default App;

This is a Modal Title

Provide a concise and informative description that effectively communicates the purpose of the modal to the user.


import React, { useState } from "react";
import {
 Modal,
 ModalCancelButton,
 ModalDescription,
 ModalFooter,
 ModalHeader,
 ModalSuccessButton,
 ModalTitle,
} from "react-beautiful-modals";


const App = () => {
 const [open, setOpen] = useState(false);


 return (
   <Modal open={open} onClose={() => setOpen(false)}>
     <ModalHeader>
       <ModalTitle>This is modal title</ModalTitle>
     </ModalHeader>
      <ModalDivider/>
     <ModalDescription>This is modal Description</ModalDescription>
      <ModalDivider/>
     <ModalFooter>
       <ModalCancelButton onClose={() => setOpen(false)}>
         Cancel
       </ModalCancelButton>
       <ModalSuccessButton>Continue</ModalSuccessButton>
     </ModalFooter>
   </Modal>
 );
};


export default App;

This is a Modal Title

Provide a concise and informative description that effectively communicates the purpose of the modal to the user.

Show Button Preview

More Info!

You can customize the button with props to change color (primary, secondary, success, info, error, warning), apply hover animations (fade, zoom, slide-up, slide-down), control size (sm, md, lg), set variants (contained, outline, text), and enable the disabled state.


import React, { useState } from "react";
import {
 Modal,
 ModalCancelButton,
 ModalDescription,
 ModalFooter,
 ModalHeader,
 ModalSuccessButton,
 ModalTitle,
} from "react-beautiful-modals";


const App = () => {
 const [open, setOpen] = useState(false);


 return (
   <Modal open={open} onClose={() => setOpen(false)} animationType="slide-up">
      <ModalHeader>
       <ModalTitle>This is modal title</ModalTitle>
     </ModalHeader>
     <ModalDescription>This is modal Description</ModalDescription>
     <ModalFooter>
       <ModalCancelButton  onClose={() => setOpen(false)}>
         Cancel
       </ModalCancelButton>
       <ModalSuccessButton>Continue</ModalSuccessButton>
     </ModalFooter>
   </Modal>
 );
};


export default App;

This is a Modal Title

Provide a concise and informative description that effectively communicates the purpose of the modal to the user.

More Info!

You can customize the modal animation types (zoom, fade, slide-up, slide-down)


import React, { useState } from "react";
import {
 Modal,
 ModalCancelButton,
 ModalDescription,
 ModalFooter,
 ModalHeader,
 ModalSuccessButton,
 ModalTitle,
} from "react-beautiful-modals";


const App = () => {
 const [open, setOpen] = useState(false);


 return (
   <Modal open={open} onClose={() => setOpen(false)} >
     <ModalHeader>
       <ModalTitle>This is modal title</ModalTitle>
     </ModalHeader>
     <ModalDescription>This is modal Description</ModalDescription>
     <ModalFooter>
       <ModalCancelButton  onClose={() => setOpen(false)}>
         Cancel
       </ModalCancelButton>
       <ModalSuccessButton>Continue</ModalSuccessButton>
     </ModalFooter>
   </Modal>
 );
};


export default App;

This is a Modal Title

Provide a concise and informative description that effectively communicates the purpose of the modal to the user.

More Info!

You can customize the button loading. you can pass props loading


import React, { useState } from "react";
import {
 Modal,
 ModalCancelButton,
 ModalDescription,
 ModalFooter,
 ModalHeader,
 ModalSuccessButton,
 ModalTitle,
} from "react-beautiful-modals";


const App = () => {
 const [open, setOpen] = useState(false);


 return (
   <Modal open={open} onClose={() => setOpen(false)} >
     <ModalHeader>
       <ModalTitle>This is modal title</ModalTitle>
     </ModalHeader>
     <ModalDescription>This is modal Description</ModalDescription>
     <ModalFooter>
       <ModalCancelButton endIcon={<Frown />  onClose={() => setOpen(false)}>
         Cancel
       </ModalCancelButton>
       <ModalSuccessButton startIcon={<Frown />>Continue</ModalSuccessButton>
     </ModalFooter>
   </Modal>
 );
};


export default App;

This is a Modal Title

Provide a concise and informative description that effectively communicates the purpose of the modal to the user.

More Info!

You can add icons to the button and display them at the start or end using the props startIcon and endIcon.


import React, { useState } from "react";
import {
 Modal,
 ModalCancelButton,
 ModalDescription,
 ModalFooter,
 ModalHeader,
 ModalSuccessButton,
 ModalTitle,
} from "react-beautiful-modals";


const App = () => {
 const [open, setOpen] = useState(false);


 return (
   <Modal open={open} onClose={() => setOpen(false)}>
     <ModalHeader>
       <ModalTitle>This is modal title</ModalTitle>
     </ModalHeader>
      <ModalDivider/>
     <ModalDescription>This is modal Description</ModalDescription>
      <ModalDivider/>
     <ModalFooter>
       <ModalCancelButton onClose={() => setOpen(false)}>
         Cancel
       </ModalCancelButton>
       <ModalSuccessButton>Continue</ModalSuccessButton>
     </ModalFooter>
   </Modal>
 );
};


export default App;

This is a Modal Title

Provide a concise and informative description that effectively communicates the purpose of the modal to the user.

More Info!

You can customize the modal overlay color using the CSS class customModalOverlay and the modal box color using the CSS class customModalContent.

Copyright © saimundev