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.

1. 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.