react-modal-render-decorator
v1.0.4
Published
An ES7 decorator for making React components render modally.
Downloads
11
Readme
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.