0.0.6 • Published 1 year ago
react-chex-modal v0.0.6
Chex's Modal Library 👀
It is a library that can use the modal that comes up from below. You can close the modal on background click.
Installation
npm
npm install react-chex-modal
yarn
yarn add react-chex-modal
Props
isModalOpen
A status value of type boolean indicating whether the modal is open or closed.
closeModal
- A custom function that closes the modal.
- Should contain the logic to change
isModalOpen
tofalse
.
User Guide
Import Library
import ChexModal from 'react-chex-modal';
Use Library
<ChexModal isModalOpen={/* Modal State */} closeModal={/* Close Modal Function */}>
{/* Modal Contents(ReactNode) */}
</ChexModal>
Example
import ChexModal from 'react-chex-modal';
function App() {
const [isModalOpen, setIsModalOpen] = useState(false);
const openModal = () => {
setIsModalOpen(true);
};
const closeModal = () => {
setIsModalOpen(false);
};
return (
<>
<button onClick={openModal}>Open Modal</button>
<ChexModal isModalOpen={isModalOpen} closeModal={closeModal}>
<div>
Hi there, I'm a modal that you can open and close. Now you can close me by clicking on the
close button on my window.
<button onClick={closeModal}>Close Modal</button>
</div>
</ChexModal>
</>
);
}
export default App;
Development Environment
React(create-react-app)
TypeScript
styled-components