@sbodi/react-modal

A modal created using react for react


Keywords
react, modal, dialog, hooks, accessibility
Licenses
ISC/GPL-3.0
Install
npm install @sbodi/react-modal@1.1.4

Documentation

@sbodi/react-modal

A modal created using react for react

NPM JavaScript Style Guide

Install

npm install --save @sbodi/react-modal

Example

 <Modal
   displayModal={displayModal}
   closeModalFunction={() => setDisplayModal(false)}
   headerContent={'Header'}
   mainContent={<div>Testing this</div>}
   footerContent={<button>Button</button>}
 />

Usage

import React, { useState } from 'react';
import Modal from '@sbodi/react-modal';

function App() {
  const [displayModal, setDisplayModal] = useState(false);

  return (
    <div>
      <button onClick={() => setDisplayModal(true)}>Open modal</button>
      <Modal
        headerContent={'Header content'}
        mainContent={<textarea rows='8' placeholder={'Enter some text'} />}
        footerContent={
          <React.Fragment>
            <button
              onClick={() => setDisplayModal(false)}
            >Cancel</button>
            <button
              onClick={() => setDisplayModal(false)}
            >Confirm</button>
          </React.Fragment>
        }
        displayModal={displayModal}
        closeModalFunction={() => setDisplayModal(false)}
      />
    </div>
  );
}

License

MIT © sbodi10