@engydev/modalreact
v1.0.3
Published
Simple react component for modals
Downloads
1
Readme
Documentation
Table of Contents
Description
The Modal React component creates a versatile and customisable modal window for usage in React applications. This component, which supports a variety of customisations and stylistic options, enables developers to easily construct modal dialogues for showing additional material, notifications, or interactive features in their apps.
Technologies
- React V18.2.0
- React-Dom V18.2.0
- PropTypes V15.8.1
- NPM V10.2.3
- NodeJS V20.10.0
- VS Code V1.87.2
Install
To install, you can use npm:
$ npm install --save @engydev/modalreact
Usage
Example
import React, { useState } from 'react';
import { Modal } from '@engydev/modalreact';
import '@engydev/modalreact/dist/style.css';
const App = () => {
const [lastActiveElement, setLastActiveElement] = useState(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => {
setLastActiveElement(document.activeElement);
setIsModalOpen(true);
};
const closeModal = () => {
setIsModalOpen(false)
if (lastActiveElement) {
lastActiveElement.focus();
}
};
return (
<>
<button onClick={openModal}>Open modal</button>
<Modal
isOpen={isOpen}
closeModal={closeModal}
title="Employee Created"
titleClose="Close"
/>
</>
)
}
export default App
Step by step
- Import component and style file
import { Modal } from '@engydev/modalreact';
import '@engydev/modalreact/dist/style.css';
- Create open/close state and save the currently active element with useState hook
import React, { useState } from 'react';
const App = () => {
const [lastActiveElement, setLastActiveElement] = useState(null);
const [isModalOpen, setIsModalOpen] = useState(false);
...
}
- Create functions open/close
const openModal = () => {
setLastActiveElement(document.activeElement);
setIsModalOpen(true);
};
const closeModal = () => {
setIsModalOpen(false)
if (lastActiveElement) {
lastActiveElement.focus();
}
};
- Add component in render with props
<Modal
isOpen={isOpen}
closeModal={closeModal}
title="Modal Component"
titleClose="Close"
/>
- Add children to the component
<Modal
isOpen={isOpen}
closeModal={closeModal}
title="Modal Component"
titleClose="Close"
>
<p>Hello world !</p>
</Modal>
- Control modal by changing state
<button onClick={openModal}>Open modal</button>
- Choose to customize styles and modal
You can choose to :
- Display the icon with :
showCloseIcon={false}
- Delete the style importation ~~
import '@engydev/modalreact/dist/style.css';
~~ and add your own style using :{styles.yourStyle}
<Modal
isOpen={isOpen}
closeModal={closeModal}
customModal={styles.modalContent}
customContainerInformations={styles.containerInformations}
customTitle={styles.title}
customBtnClose={styles.btnClose}
customIconClose={styles.picture}
title="Your Message Has Been Sent"
titleClose="Close the message"
showCloseIcon={false}
>
<p>Hello world !</p>
</Modal>
Authors
Engy Essam
License
ISC © Engy Essam