modal-oc-react v1.0.6

modal-oc-react

modal-oc-react allows you to have a modal very easily in your React project

Installation

Install my-project with npm

  npm install modal-oc react

Usage/Examples

Add the ModalProvider to your main file

import { ModalProvider } from "modal-oc-react";

ReactDOM.createRoot(document.getElementById("root")).render(
  <ModalProvider>
    <App />
  </ModalProvider>
);

Now you can open your modal anywhere in your application

import { useModal } from 'modal-oc-react'

export const MyComponent = () =>{
    const {openModal} = useModal()

    function handleClick = () =>{
        openModal({
            title: "Title of the modal",
            content: "Content of modal"
        })
    }

    return (
        <button onClick={handleClick}>Click me</button>
    )
}

useModal options

openModal({
  title: "", //String, Title of the Modal
  content: "", //String, Content below the Title
  showCloseButton: true, //Boolean, Show the close button, by default is true
  escapeToClose: true, //Boolean, user can close modal pressing ESC, by default is true
  colorsModal: {
    background: "", //String, Change the background color of the Modal
    color: "", //String, Change the text color of the Modal
  },
  colorsButton: {
    background: "", //String, Change the background color of the close button
    color: "", //String, Change the text color of the close button
  },
});