JSPM – react-simple-modal-by-vassili-langlois@1.1.2

Package Exports

react-simple-modal-by-vassili-langlois

Readme

A customizable React modal component.

Requirements

Node.js version 14.x or higher
npm (usually installed with Node.js)
Recommended code editor: Visual Studio Code

Installation

npm install react-simple-modal-by-vassili-langlois

Usage

import React from "react";
import Modal from "react-simple-modal-by-vassili-langlois";
import "react-simple-modal-by-vassili-langlois/dist/modal.css";

function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      <Modal isOpen={open} onClose={() => setOpen(false)}>
        <div>Your content here</div>
      </Modal>
    </>
  );
}

Props

Prop	Type	Description
`isOpen`	boolean	Controls whether the modal is visible
`onClose`	function	Callback fired when closing the modal
`children`	node	Content inside the modal
`containerClassName`	string	Custom class for the outer container
`containerStyle`	object	Inline styles for the outer container
`modalClassName`	string	Custom class for the modal box
`modalStyle`	object	Inline styles for the modal box
`contentClassName`	string	Custom class for the content wrapper
`contentStyle`	object	Inline styles for the content wrapper
`closeButtonClassName`	string	Custom class for the close button
`closeButtonStyle`	object	Inline styles for the close button

CSS Customization

The modal uses default class names and also supports full customization via props.

Simplified HTML structure:

You can override any part of the modal with your own class or inline styles using the className and style props.

License

MIT

react-simple-modal-by-vassili-langlois