react-modal-render-decorator

An ES7 decorator for making React components render modally.

Installation

Install the package with NPM:

$ npm install react-modal-render-decorator

Usage

When the decorator is applied to a React component, it causes the render method to be bypassed when rendering, in favor of an appropriate method for the component's current "mode". The name of the method to be called is determined by the String value of the renderMode property in the component's state definition.

Example:

import React from "react";
import modalRender from "react-modal-render-decorator";
 
@modalRender
class ModalComponent extends React.Component {
  constructor(props) {
    super(props);
 
    this.state = { renderMode: "Initial" };
  }
 
  componentDidMount() {
    this.setState({ renderMode: "Loading" });
  }
 
  componentDidUpdate() {
    this.setState({ renderMode: "Ready" });
  }
 
  renderInitialMode() {
    return (
      <div>Initial.</div>
    );
  }
 
  renderLoadingMode() {
    return (
      <div>Loading...</div>
    );
  }
 
  renderReadyMode() {
    return (
      <div>Ready!</div>
    );
  }
}

Basically, the decorator is just a bit of sugar to let you logically separate the rendering code of your modal component.