React CMS Magic

A light framework for integrating React with any CMS using the DOM as the hook.

Installation

yarn add react-cms-magic

or

npm install --save react-cms-magic

Example

import ReactCMSMagic from 'react-cms-magic';
import SomeComponent from './components/SomeComponent';
import SomeOtherComponent from './components/SomeOtherComponent';

class TestApp extends ReactCMSMagic {
    constructor(){
        super();
        // Register a component
        this.register(SomeComponent)
        // Component name to look for in the DOM (optional)
        this.register(SomeOtherComponent, 'SomeOtherComponentName');
        this.renderComponents();
    }
}

export default new TestApp();

And then in your page's markup:

<section>
    <div data-component="SomeComponent" data-prop-title="Title" data-prop-tag="h1"></div>
    <div data-component="SomeOtherComponentName" data-props='{"title": "Fabulous"}'></div>
</section>

Example using Redux

import ReactCMSMagic from 'react-cms-magic';
import { ReduxDomFactory } from 'react-cms-magic';
import { createStore } from 'redux';

import SomeComponent from './components/SomeComponent';
import SomeOtherComponent from './components/SomeOtherComponent';

class TestApp extends ReactCMSMagic {
    constructor(){
        super();

        //Redux implementation
        const store = createStore(counter);
        this.factory = new ReduxDomFactory(store);

        this.register(SomeComponent);
        this.register(SomeOtherComponent, 'SomeOtherComponentName');

        this.buildComponents();
    }
}

export default new TestApp();