React Modal Component for Accessible Rich Internet Applications.
Installation
npm install react-dev-comps.modal --save
Usage
You can use Modal component with 3 required props.
Other than that, you can customize and extend almost anything that Modal component provides. Please check API section.
-
Modal component has 2 required props:
- isOpen: A boolean that is used to track open state of the modal.
- onExit: A callback that will be called on any user action causing a Modal closed according to ARIA standarts.
import Modal from 'react-dev-comps.modal'; import * as React from 'react'; import Modal from 'react-dev-comps.modal'; interface Prop {} interface State { isModalOpen: boolean; } class MyComponent extends React.Component<Prop, State> { constructor(props: Prop) { super(props); this.state = { isModalOpen: false }; } toggleModal(isModalOpen: boolean) { return () => { this.setState({ isModalOpen }); }; } render() { const { isModalOpen } = this.state; return ( <div className="body-container"> <button onClick={this.toggleModal(true)}> {'Open Modal'} </button> <Modal isOpen={isModalOpen} onExit={this.toggleModal(false)} > <div className="modal-content"> {/* You can create your modal content here.*/} </div> </Modal> </div> ); } } export default MyComponent;
API
react-dev-comps.modal
exposes a React Component which takes the following props:
-
isOpen
: A boolean that is used to track open state of the Modal. -
onExit
: A callback that will be called on any user action causing a Modal closed according to ARIA standarts. -
children
: A React Child Component that will create the Modal content. -
preventDefaultStyles
: A boolean determines the default style usage. Defaults to false. -
preventOutsideClickExits
: A boolean determines the default closing behaviour of Modal component. Defaults to false. -
className
: A string that will be added as a class name to the parent element. -
title
: A string that can be used as default header component's title text. -
headerComp
: A React Child Component that can be used to override default header component of Modal. -
footerComp
: A React Child Component that can be used to have a custom footer component of Modal.
License
Licensed under the MIT License, Copyright © 2019-present.
See LICENSE for more information.