react-dev-comps.modal v0.0.2

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.

```js
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.