react-beautiful-modals v1.0.5

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

Title & Description Component

Props

Button Component

Props

Divider Component

Props

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