react-modal-hoc

React higher-order component (HOC) that allows to wrap your component with modal isOpen API. Also can be used as a decorator.
Inspired by react-modal.

Installation

yarn add react-modal-hoc

Api

Properties

Component.propTypes = {
    isOpen: PropTypes.bool.isRequired,
    wrappedRef: PropTypes.func,
};

Example

// components/modal.js:
import React from 'react';
import withModal from 'react-modal-hoc';

const Modal = () => <div className="modal">{/* Some modal body here */}</div>;

export default withModal(Modal);

// components/index.js:
import React, { Component } from 'react';
import Modal from './modal';

export default class App extends Component {
    
    constructor(props) {
        super(props);
        
        this.toggle = this.toggle.bind(this);
        this.state = {
            isOpenModal: false,
        };
    }
    
    componentDidMount() {
        window.setInterval(this.toggle, 2000);
    }
    
    toggle(e) {
        this.setState(({ isOpenModal }) => ({ isOpenModal: !isOpenModal }));
    }
    
    render() {
        return (
            <div className="app">
                <Modal isOpen={this.state.isOpenModal} />
            </div>
        );
    }
}

License

MIT