@loicantoniak/react-modal v1.0.0

@loicantoniak/react-modal

Table of Contents

• Installation
• Usage
• Options
• Author
• License

Installation

To install, you can use npm or yarn:

$ npm install --save @loicantoniak/react-modal
$ yarn add @loicantoniak/react-modal

Usage

Here is a simple example of react-easy-modal being used in an app :

import React, { useState } from "react";
import ReactModal from "@loicantoniak/react-modal";

function App() {
  const [showModal, setShowModal] = useState(false);
  return (
    <ReactModal
      prefix="custom_modal"
      size="lg"
      centered
      show={showModal}
      onHide={() => setShowModal(false)}
      header={<div className="closeButton" onClick={() => setShowModal(false)} />}
    >
      <div className={style.content}>
        <p>Inside modal !</p>
      </div>
    </ReactModal>
  );
}

export default App;

Options

show boolean

Control modal state from parent component

centered boolean (default: false)

return true if you want the modal in the center of the window

size string (default: "md")

differents modal's sizes, possibilities : "xs", "sm", "md", "lg", "full"

onHide: Function

Handle modal closing. Should return true if you allow closing

prefix: string

ClassName for custom modal component

header: JSX.Element | string

Modal heading

footer: JSX.Element | string

Place here your actions

children: JSX.Element | string

Modal body

Author

• Loïc Antoniak alias @loicantoniak

License

MIT