abj-react-modal

A customizable React modal component.
Built with simplicity and reusability in mind.

0 – Installation

npm install abj-react-modal
# or
yarn add abj-react-modal

1 – Usage

import React, { useState } from "react";
import { Modal } from "abj-react-modal";
import "abj-react-modal/dist/index.css";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
      <h1>Hello World</h1>
      <p>This is a modal component from abj-react-modal !</p>
    </Modal>
  );
}

export default App;

2 – Props

Props | Type | Default | Description

isOpen | boolean | false | Controls when the modal is open

onClose | function | – | Called when the modal is closed

children | node | – | Content of the modal

3 – Style

By default, the modal is styled with a minimal and modern design.

• Overlay
• Centered modal
• Close button (x)

But you can easily override the default styles by editing the className ABJ-react-modal.

.ABJ-react-modal {
  /* your overrides */
}

4 – License

This project is licensed under the MIT License.

Make with ❤️ by Charles ABJ