react-modal
Reusable react components to get a simple modal with ease! Highly customizable and responsive.
Table of Contents
Installation
npm
npm install @casper124578/react-modal
yarn
yarn add @casper124578/react-modal
Usage
import React from "react";
import { Modal } from "@casper124578/react-modal";
function App() {
const openModal = () => {
document.querySelector("#modal_id").classList.add("active");
};
return (
<div className="App">
<button onClick={openModal}>Open Modal</button>
<Modal transitionSeconds={0.3} id="modal_id" title="Hello world">
This is the modal body, this is cool huh? I think it is!
<p style={{ color: "green" }}>it can also render HTML</p>
</Modal>
</div>
);
}Available Props
| Option | Type | Description | required | default |
|---|---|---|---|---|
| title | string | The title of the modal | true | Empty string |
| id | string | The ID of the modal, required to open/close modal | true | Empty string |
| width | string | The width of the modal | false | 600px |
| height | string | The height of the modal | false | auto |
| bgColor | string | background color of the modal | false | white |
| textColor | string | text color of the modal | false | black |
| borderRadius | string | border-radius of the modal | false | 10px |
| transitionSeconds | number | Amount of seconds the modal should transition | false | 0.3 |
