@jaw-dev/react-modal NPM

@jawdev/react-modal

A simple React modal

Install

npm install --save @jaw-dev/react-modal

yarn add @jaw-dev/react-modal

Usage

import React, { Component } from 'react';

import Modal from 'jawdev-react-modal';

class Example extends Component {
  render() {
    return (
      <Modal>
        <ModalContentComponent />
      </Modal>
    );
  }
}

Options

Option	Description	Type	default
label	The text in the main modal button	string	'Open'
delay	By defaul the modal opens/closes with a fade in/out. The delay id how long the fade in/out takes	integer	200
content	You can use a string for the modal content instead of an React component	string	''
svgprops	By default the modal close icon is a SVG. This option will allow you to set the SVG attributes such as with and height	object	{}
modalCloseImage	Overwrite the default Close Icon image	string	default svg
modalCloseLabel	Overwrite the default Close Label (hidden for accesiblility be default)	string	'Close'
overlayCloseOnClick	Close the modal on overlay click	boolean	true
overlayCloseOnClick	Close the modal on overlay click	boolean	true
closeOnButtonClick	Close the modal on close button click	boolean	true
openOnLoad	Open the Modal on page load	boolean	false
showButton	Show the modal open button	boolean	true
showCloseButton	Show the modal close button	boolean	true

** Style Components is used for generating the CSS to allow for the use of CSS pseudo selectors. To overwrite a component's CSS, create a object with the CSS you want to overwrite.

const newModalCloseStyles = {
  top: '1rem',
  right: '1rem',
  padding: '1rem',
  backgroundColor: 'black',
  ':hover': {
    cursor: 'grab'
  }
};

@jaw-dev/react-demo-components

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago