Components: Render

Renders components are responsible for generating a React.js component that should handle rendering the results of the pipeline. If the pipeline execution is in progress, the data will be delivered to render components in real-time as it comes through the pipeline. This allows for easy creation of real-time user dashboards.

"Hello world!" render example

In the simplest instance, "Hello world!" render component would look like this:

export default () => React.createClass({
    render() {
        return (
            <div>
                <h1>Hello world!</h1>
                <div>{JSON.stringify(this.props.data)}</div>
            </div>
        );
    }
});

This render component create a React.js component that renders a string "Hello world!" and below it a stringified representation of incoming data.
Note that incoming data will always be passed through to component using data property.

Basic render component for debugging

It is recommended to use the basic component that would represent incoming data as a tree structure for debugging.
Here's an example of such component:

import JSONView from 'react-json-tree';

export default () => React.createClass({
    render() { 
        return <JSONView data={this.props.data} />; 
    }
});

Examples

You can find real-world examples of render components in usecases folder, currently the following ones are available:

• Sentiments map render
• Product comparison render