useModal - React custom hook

Hook to wrap a component and show it as a modal.

It returns:

• Wrapped component as a new component.
• Status as a boolean.
• Toggle function.

Why useModal?

With this hook, you can easily render components showing them as a modal:

• View components as a modals.
• Share logic to the modal component.
• Call toggle function to open/close the modal.

Usage

Just install:

npm install react-hook-usemodal

And import the hook:

importuseModalfrom'react-hook-usemodal';

Use it in your component:

importFormfrom'../components/Form';constYourComponent=props=>{
...
const[Modal,show,toggle]=useModal(Form);return<Modal/>...}

Optional, you can share logic as a params:

return<Modalprop1={'string'}prop2={()=>console.log(123)}/>

Full Example

(Check it in deployed example)

Component to show as modal:

importReactfrom'react'import'./item.css';exportdefaultprops=>{return(<divclassName='form-example'><h1>Item component</h1><inputplaceholder="Username.."/><button>Add</button><br/><buttononClick={props.closeModal}>cancel</button></div>)}

Main component, where you call the modal:

importReactfrom'react';importuseModalfrom'useModal';importItemfrom'./Item/Item';functionApp(){const[Modal,show,toggle]=useModal(Item)return(<divclassName="App">{show&&<ModalcloseModal={toggle}/>}<buttononClick={()=>toggle(!show)}>Add user</button></div>);}exportdefaultApp;