NOTE: This package working with React 18.
This package was created due to the lack of really good options for modals in reactjs, this is a library with zero dependencies in which you can render modals from anywhere, either through the API or from its component. With a nice UI design.
Install from:
npm install @redshank/react-modal
or
yarn add @redshank/react-modal
import css in first file to project
index.js
import '@redshank/react-modal/lib/styles/style.css';Now use the API.
import Modal from '@redshank/react-modal';
function App() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button
onClick={() => setIsOpen(true)}>
Open
</button>
<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Corporis esse expedita,
libero maxime placeat quam sunt tenetur?
Eos illum laudantium nisi provident quaerat.
Cupiditate dolorum eius natus neque nulla
praesentium!</p>
</Modal>
</div>
);
}| prop | type | default | description |
|---|---|---|---|
| title | string | "" | Required. Title of notification |
| message | string | "" | Required. Message of notification |
| type | enum | "success" | Optional. defines the type of notification. "success", "info", "warning", "error" |
| position | enum | "topRight" | Optional. defines the position of notification. "topRight", "topLeft", "topCenter", "bottomRight", "bottomLeft", "bottomCenter" |
| duration | number | 7000 | Optional. Defines the time that the notification will be active on the screen |
| prop | type | default | description |
|---|---|---|---|
| message | string | "" | Required. Message of notification |
| type | enum | "success" | Optional. defines the type of notification. "success", "info", "warning", "error" |
| position | enum | "topCenter" | Optional. defines the position of notification. "topRight", "topLeft", "topCenter", "bottomRight", "bottomLeft", "bottomCenter" |
| duration | number | 7000 | Optional. Defines the time that the notification will be active on the screen |
| key | number or string | - | Optional. Message key, useful to update the message. |
const render = ({
title,
message,
icon,
type,
id,
onRemove,
className,
style,
onClick
}) => {
return (
<div style={style} className={className} onClick={onClick}>
<h5>{title}</h5>
<p>{message}</p>
</div>
);
};Create with Love ❤️ by Kevin Rivas.