ReactJs

Revolvapp Object

Revolvapp can work in React, just import the editor to do this.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// import Revolvapp
import './static/revolvapp.css';
import Revolvapp from './static/revolvapp.js';

// call
Revolvapp('#myemail', {
    editor: {
        path: '/revolvapp-dist/',
        template: '/my-folder/template.html'
    }
});

To connect plugins, you need to specify the import of Revolvapp in the plugin file, like this:

import Revolvapp from './static/revolvapp';

After that you can run Revolvapp with the plugins:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// import Revolvapp
import './static/revolvapp.css';
import Revolvapp from './static/revolvapp.js';
import './static/reorder.js';

// call
Revolvapp('#myemail', {
    plugins: ['reorder'],
    editor: {
        path: '/revolvapp-dist/',
        template: '/my-folder/template.html'
    }
});

Multi-page app

You may want to destroy the Revolvapp object when navigating through pages in a multi-page application. To do this, use the app.stop method. Here's an abstract example of a multi-page application:

var app;
function Home() {
    useEffect(() => {
        app = Revolvapp('#myemail', {
            editor: {
                path: '/revolvapp-dist/',
                template: '/my-folder/template.html'
            }
        });
    });

    return (
        <div>
            <h2>Home</h2>
            <div id="myemail"></div>
        </div>
    );
}
function About() {
    if (app) {
        app.stop();
    }
    return (
        <div>
            <h2>About</h2>
        </div>
    );
}

Component

And here's an example of creating a simple component for Revolvapp:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './revolvapp.css';
import Revolvapp from './revolvapp.js';

var app;

// Component
class RevolvappJs extends React.Component {
    componentDidMount() {
        app = Revolvapp(ReactDOM.findDOMNode(this), {
            editor: {
                path: '/revolvapp-dist/',
                template: '/my-folder/template.html'
            }
        });
    }
    componentWillUnmount() {
        if (app) {
            app.stop();
        }
    }
    render() {
        return <div></div>;
    }
}

// Render
ReactDOM.render(
    <RevolvappJs />,
    document.getElementById('root')
);