sbodi10 / react-modal

A modal created using react for react

@sbodi/react-modal

A modal created using react for react

Prerequisites

Before you begin, ensure you have met the following requirements:

• You have installed React with a version that supports hooks

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>
  );
}

Contributors

Thanks to the following people who have contributed to this project:

• @roseg43

License

MIT © sbodi10