react-hook-usemodal

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:

import useModal from 'react-hook-usemodal';

Use it in your component:

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

Optional, you can share logic as a params:

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

Full Example

(Check it in deployed example)

Component to show as modal:

import React from 'react'
 
import './item.css';
 
export default props => {
  return (
    <div className='form-example'>
      <h1>Item component</h1>
      <input placeholder="Username.." />
      <button>Add</button>
      <br />
      <button onClick={props.closeModal}>cancel</button>
    </div>
  )
}

Main component, where you call the modal:

import React from 'react';
 
import useModal from 'useModal';
import Item from './Item/Item';
 
function App() {
  const [Modal, show, toggle] = useModal(Item)
 
  return (
    <div className="App">
      {show && <Modal closeModal={toggle} />}
      <button onClick={() => toggle(!show)}>Add user</button>
    </div>
  );
}
 
export default App;