basic-modal-component1 v1.0.7
Basic Modal Component for react
This is a simple modal component for react
You can find the source code for this package here : https://github.com/vfauveau/modal-react-component
The link towards the npm page of the package : https://www.npmjs.com/package/basic-modal-component1
Prerequisites
- node.js
- A react app
Installation
cd yourAppFolder
npm install basic-modal-component1
import React, { useRef } from "react";
import Modal from "basic-modal-component1";
import Header from "./Header";
import Custom from "./Custom";
function App() {
let modalRef = useRef();
return (
<div className="App">
<Header modalRef={modalRef} />
<Modal customContent={<Custom />} ref={modalRef} />
</div>
);
}
Utilisation
You will need to get the showModal function from the component and use it in an event trigger to display the modal.
function Example (props) {
// get the showModal function and assign it to a function.
const callModal = () => props.modalRef.current.showModal();
return (
<button onClick={callModal}>Your text</button>
);
}
export default Example;
Props and customisation
The component can receive multiple props.
To hide the close button, pass the "showCloseButton" prop (type : boolean, default value : false).
Content of the modal : 1. The "message" prop can be used if you just want to display a message. 2. The "customContent" prop can be used if you want to customize the content of the modal. (default value : undefined) 3. If you use "customContent" the message prop will be empty.