1.4.4 • Published 1 year ago
modal-react-komponent v1.4.4
React Modal Komponent
React Modal Komponent is a simple and customizable modal component for React applications.
https://www.npmjs.com/package/modal-react-komponent
Installation
You can install React Modal Komponent via npm:
npm i modal-react-komponent
Usage
To use React Modal Komponent in your application, simply import it and render it within your component hierarchy.
Simple example
import { Modal } from "modal-react-komponent";
import { useState } from "react";
export default function MyApp() {
const [isOpen, setIsOpen] = useState(false);
const toggleModal = () => {
setIsOpen(!isOpen);
};
return (
<div>
<button onClick={toggleModal}>Open modal</button>
<Modal
title="Hi folks!"
message="Hello from modal-react-komponent"
buttonText="Close modal"
isOpen={isOpen}
toggleOpen={toggleModal}
/>
</div>
);
}
Custom
You can custom the modal using 5 parameters
Parameter | Type | Description |
---|---|---|
title | string | The title of the modal |
message | string | The message displayed in the modal |
buttonText | string | The text of the close button |
isOpen | boolean | Controls the open state of the modal |
toggleOpen | function | Function to change the open state |
Screenshot
This is a simple preview of the modal