Custom Modal
An Easy React Customizable Modal
🚀 Getting Started
Using yarn
:
yarn add @wibmw\custom-modal
✨ Usage
How to use CustomModal
in your project:
import CustomModal from 'custom-modal';
export default () => {
// Modal Open/Close toggle
const [isOpen, setisOpen] = useState(false)
const toggle = () => setisOpen(!isOpen)
return (
<>
{/** *********** Page ******************/}
<main className='...'>
<section className='...'>
.....
</section>
{/** *********** Custom Modal ******************/}
<CustomModal {...{ isOpen, toggle }} >
<div>Successfully Registered !</div>
<br />
<div className='form-button' onClick={() => navigate('/next-page')}>
Link to the next page
</div>
</CustomModal>
</main>
</>
)
}
📌 Props
Prop | Type | Default | Required |
---|---|---|---|
isOpen |
Boolean | false |
Yes |
toggle |
() => void | Yes | |
children |
ReactNode | No |