react-beautiful-modals

A lightweight, customizable modal component for web applications. Easy to integrate, responsive, and supports user interactions with customizable responses. Ideal for overlays, alerts, and dialogs without complex setup

🎉🎉 Features

• Simple setup and usage.
• Fully responsive design for all screen sizes.
• Customizable styles and behavior.
• Built-in support for user interactions and responses.
• Lightweight with minimal dependencies.
• Easily customizable via props.
• Typescript support
• Small bundle size

Example

1. Installation

npm install react-beautiful-modals

yarn add react-beautiful-modals

pnpm add react-beautiful-modals

2. Live Demo

React-beautiful-modal

3. Simple 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>You content here</h1>
    </Modal>
  );
};

export default App;

3.1 With component usage

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;

Read Documentation

React-beautiful-modal

Props

Modal Component

Props

| Prop | Type | Default | Description | | -------------------------- | --------------------------------------- | ------- | ------------------------------------------------------------------------- | | open | boolean | | Controls the visibility of the modal or modal content. | | onClose | () => void | | Callback function to handle closing of the modal. | | children | React.ReactNode | | Content to be displayed inside the component. | | size | "sm","md","lg" | "sm" | Size of the modal. | | animationType | "slide-up","slide-down","fade","zoom" | "zoom" | Type of animation used for the modal. | | width | number | "25vw" | Custom width for the modal. | | disableBackdropClick | boolean | false | Disables closing the modal when clicking on the backdrop. | | customModalOverly | string | | Custom class name to apply additional styles or override existing styles. | | customModalContent | string | | Custom class name to apply additional styles or override existing styles. |

Title & Description Component

Props

| Prop | Type | Default | Description | | ---------------------------- | ------------------------------------------- | -------- | ------------------------------------------------------------------------- | | children | React.ReactNode | | Text content of the title. | | fontSize | string | | Custom font size for the title. | | color | string | | Color for the title. | | textAlign | "left","center" | "left" | Text alignment for the title. | | fontWidth | "300","400","500","600","700","800","900" | "700" | Font weight for the title. | | customModalTitle | string | | Custom class name to apply additional styles or override existing styles. | | customModalDescription | string | | Custom class name to apply additional styles or override existing styles. |

Button Component

Props

| Prop | Type | Default | Description | | -------------------------------------------------- | ----------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------- | | children | React.ReactNode | | Content displayed inside the button. | | color | "primary","secondary", "success","error","warning","info","primary" | "secondary" | Color theme for the button. | | size | "sm","md","lg" | "sm" | Size of the button. | | animationOnHover | "slide-up","slide-down", "fade","zoom" | "slide-up" | Animation applied when hovering over the button. | | disabled | boolean | false | Disables the button when set to true. | | onClose | () => void | | Callback for closing the button (useful if the button is part of a modal or similar component). | | startIcon | React.ReactNode | | Icon displayed at the start of the button. | | endIcon | React.ReactNode | | Icon displayed at the end of the button. | | loading | boolean | false | Shows a loading spinner when true. | | variant | "contained","outline", "text","contained" | "contained" | Variant style of the button. | | customModalCancelButton | string | "" | Custom class name to apply additional styles or override existing styles. | | customModalSuccessButton | string | | Custom class name to apply additional styles or override existing styles. | | primary,secondary,error,success,warning,info | string | | Custom class name to apply additional styles or override existing styles. | | btn-sm,btn-md,btn-lg | string | | Custom class name to apply additional styles or override existing styles. |

Divider Component

Props

| Prop | Type | Default | Description | | ------------------------ | -------- | ------- | ------------------------------------------------------------------------- | | color | string | | Color of the divider line. | | height | string | | Height of the divider line. | | customModalDivider | string | | Custom class name to apply additional styles or override existing styles. |

This documentation helps developers understand the props they can use, along with their types and defaults, including how to apply custom styles through customClass.