dialog-modal-react-component v0.0.4

dialog-modal-react-component

A React component for a modal made with dialog html element

Install

npm install --save dialog-modal-react-component

Usage

Where you want to use the modal, import the component and use it like this:

import { useEffect } from "react";

import Modal from "dialog-modal-react-component";
import "modal-dialog-react-component/dist/index.css";

class Example extends Component {
  render() {
    const [isModalOpen, setIsModalOpen] = useState(false); // state to control the modal
    return (
      <Modal isOpen={isModalOpen} setIsOpen={setIsModalOpen}>
        {Children}
      </Modal>
    );
  }
}

Then use setIsModalOpen(true) to open the modal. It can be used in a button onClick event for example, or when your form is submited.

Example

import React from "react";
import Modal from "dialog-modal-react-component";
import { useState } from "react";
const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const handleClick = () => {
    setIsModalOpen(true);
  };
  return (
    <>
      <p>App</p>
      <button onClick={handleClick}>Ouvrir la modal</button>
      <Modal isOpen={isModalOpen} setIsOpen={setIsModalOpen}>
        <p>Modal</p>
      </Modal>
    </>
  );
};

export default App;

Customize

This component comes with a basic default style and is imported as import "./modal.css"; but you can customize it by adding your own css. Check the repository to get the default style and its classes and override it in your own css file.

Example:

.modal {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  padding: 1rem;
  width: 100%;
  max-width: 40rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

License

MIT © VB2095