1.0.5 • Published 8 months ago

react-beautiful-modals v1.0.5

Weekly downloads
-
License
ISC
Repository
github
Last release
8 months ago

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

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

PropTypeDefaultDescription
openbooleanControls the visibility of the modal or modal content.
onClose() => voidCallback function to handle closing of the modal.
childrenReact.ReactNodeContent 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.
widthnumber"25vw"Custom width for the modal.
disableBackdropClickbooleanfalseDisables closing the modal when clicking on the backdrop.
customModalOverlystringCustom class name to apply additional styles or override existing styles.
customModalContentstringCustom class name to apply additional styles or override existing styles.

Title & Description Component

Props

PropTypeDefaultDescription
childrenReact.ReactNodeText content of the title.
fontSizestringCustom font size for the title.
colorstringColor 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.
customModalTitlestringCustom class name to apply additional styles or override existing styles.
customModalDescriptionstringCustom class name to apply additional styles or override existing styles.

Button Component

Props

PropTypeDefaultDescription
childrenReact.ReactNodeContent 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.
disabledbooleanfalseDisables the button when set to true.
onClose() => voidCallback for closing the button (useful if the button is part of a modal or similar component).
startIconReact.ReactNodeIcon displayed at the start of the button.
endIconReact.ReactNodeIcon displayed at the end of the button.
loadingbooleanfalseShows a loading spinner when true.
variant"contained","outline", "text","contained""contained"Variant style of the button.
customModalCancelButtonstring""Custom class name to apply additional styles or override existing styles.
customModalSuccessButtonstringCustom class name to apply additional styles or override existing styles.
primary,secondary,error,success,warning,infostringCustom class name to apply additional styles or override existing styles.
btn-sm,btn-md,btn-lgstringCustom class name to apply additional styles or override existing styles.

Divider Component

Props

PropTypeDefaultDescription
colorstringColor of the divider line.
heightstringHeight of the divider line.
customModalDividerstringCustom 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.

1.0.5

8 months ago

1.0.4

8 months ago

1.0.3

8 months ago

1.0.2

8 months ago

1.0.1

8 months ago

1.0.0

8 months ago