Try using a Modal with a useState Hook from where you want to use it!
- It animates from bottom to Up.
- It closes when clicked on Backdrop.
- Height of Modal can be controlled.
npm install woowa-light-modal
yarn add woowa-light-modal
import { useState } from "react";
import Modal from "./lib/Modal";
function App() {
const [isOpen, setIsOpen] = useState(false);
const toggleModal = () => {
setIsOpen(!isOpen);
};
return (
<div className="App">
<button onClick={toggleModal}>open</button>
<Modal isOpen={isOpen} onClose={toggleModal} height={"227px"}>
<div>I am children.</div>
</Modal>
</div>
);
}
export default App;
This example will render 'open' button which is an trigger independent on Modal
. When you click the button, The Modal
is open from the Bottom. You can add the children between the <Modal>
Tags and also give state, handler and height of Modal you wants.
If you want to toggle the Modal, make a handler function which includes setState
like that example.
-> One or multiple children.
-> height(style) of Modal
-> opened state of Modal
-> Callback functions, triggered when clicked Backdrop.
yarn add woowa-light-modal
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.