react-boo v0.0.6

react-boo

A super simple modal component for React.js 👻

Table of contents

• Installation
• Usage
• Demos

Installation

Use npm to install:

$ npm install react-boo

Usage

<Boo/> requires only one prop bashowModal that controls the visibility of the modal window.

To close modal window via background click and/or a built-in close button, a prop handleClose that toggles the state of bashowModal is required.

Optional props with default values are listed below:

<Boo
  // Boolean!: determines if modal should be displayed or not.
  showModal={false}

  // Boolean: shows the built-in close button at the top of the modal window.
  showCloseButton={false}

  // Boolean: closes the modal window when the background is clicked.
  closeOnBackgroundClick={false}

  // Boolean: moves the built-in close button to the right side of the modal window
  moveCloseButtonToRight={false}

  // Function: toggles the value of showModal. Required if setting closeOnBackgroundClick and/or showCloseButton to true.
  closeModal={fnc}

  // Object: adds or overrides the default stylings for background.
  backgroundStyle={
    position: 'fixed',
    top: '0',
    left: '0',
    width:'100%',
    height: '100%',
    background: `rgba(0, 0, 0, 0.6)`,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  }

  // Object: adds or overrides the default stylings for the modal window.
  defaultDialogBoxStyle={
    maxWidth: '70%',
    borderRadius: '5px',
    padding: '20px',
    background: 'white',
    display: 'flex',
    flexDirection: 'column'
  }
/>

Demos