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;