EXAMPLE CODE###

----project.js-----
import React from 'react';
import ReactComponentsController from 'react-components-controller';
import PackageComponent from '/packages/somepackage/packege';
import ListingItem from './mods/ListingItem';
import Navbar from './mods/Navbar';

const Controller = new ReactComponentsController();
Controller.registerComponent('ListingItem', ListingItem);

export default () => (
    <div>
        <Navbar />
        <PackageComponent extendController={Controller} />
    </div>
);

----package.js----
import React from 'react';
import ReactComponentsController from 'react-components-controller';
import ListingWrapper from './components/ListingWrapper';
import ListingContainer from './components/ListingContainer';
import ListingItem from './components/ListingItem';
import ListingItemAvatar from './components/ListingItemAvatar';

const Controller = new ReactComponentsController();
Controller.registerComponent('ListingWrapper', ListingWrapper);
Controller.registerComponent('ListingContainer', ListingContainer);
Controller.registerComponent('ListingItem', ListingItem);
Controller.registerComponent('ListingItemAvatar', ListingItemAvatar);

export default ({extendController}) => {
    if(extendController){
        Controller.extendController(extendController);
    }
    return (
        <div>
            {Controller.getComponent('ListingWrapper',{ListingTitle:'Default lising'})}
        </div>
    );
}


----ListingWrapper.jsx---
import React from 'react';

export default ({Controller, ListingTitle}) => {
    if(extendController){
        Controller.extendController(extendController);
    }
    return (
        <div>
            {ListingTitle}
            {Controller.getComponent('ListingContainer',{ListingContainerTitle:'Default lising container title'})}
        </div>
    );
}

Methods##

| Method | Attributes | Description | |---|---|---| | registerComponent | componentName: [String] component: [ReactComponent]options: [Object] | Register component in Controller | | registerBeforeComponent | componentName: [String] component: [ReactComponent] | You can register component to display before some basic register component | | registerAfterComponent | componentName: [String] component: [ReactComponent] | You can register component to display after some basic register component | | registerComponentExtend | componentName: [String] extend: [Object] options: [Object] | You can register components extend it will be extended after call extendController method | | extendComponent | componentName: [String] extend: [Object] options: [Object] | You can extend methods of registred components for example render method | | extendController | controller: [ReactComponentsController] | You can overwrite and extend controller by another controller. All registred component with the same name will be overwrite | | getComponent | componentName: [String] props: [Object] options: [Object] | Render registred component by his registration name |

Methods description

registerComponent(componentName, component, options)

• componentName - [String] name of virtual instance where Your component will be displayed
• component - [Component] React Component to display
• options - [Object] of additional information. You can use it in the component

const Controller = new ReactComponentsController();
Controller.registerComponent('ListingWrapper', testComponentWrapper);
Controller.registerComponent('ListingContainer', testComponentContainer);
Controller.registerComponent('ListingItem', testComponentItem);

registerBeforeComponent(componentName, component)

• componentName - [String] name of virtual instance where main component will be displayed after this component
• component - [Component] React Component to display

const Controller = new ReactComponentsController();
Controller.registerComponent('ListingWrapper', testComponentWrapper);
Controller.registerBeforeComponent('ListingWrapper', testComponentBefore);

registerAfterComponent(componentName, component)

• componentName - [String] name of virtual instance where main component will be displayed before this component
• component - [Component] React Component to display

const Controller = new ReactComponentsController();
Controller.registerComponent('ListingWrapper', testComponentWrapper);
Controller.registerAfterComponent('ListingWrapper', testComponentAfter);

registerComponentExtend(componentName, extend, options)

• componentName - [String] name of virtual instance where main component will be displayed
• extend - [Object] Object with function that will be extended and overwrite
• options - [Object] of additional information. You can use it in the component

const Controller = new ReactComponentsController();
const Controller2 = new ReactComponentsController();

Controller.registerComponent('test1', testComponent);

Controller2.registerComponentExtend('test1', {
    testMethod(){
        return 'extended test method';
    },
    render(){
        return (<div>extended: {this.testMethod()}</div>);
    }
});
Controller2.registerComponent('test2', testComponent2);

Controller.extendController(Controller2);

extendComponent(componentName, extend, options)

• componentName - [String] name of virtual instance where main component will be displayed
• extend - [Object] Object with function that will be extended and overwrite
• options - [Object] of additional information. You can use it in the component

const Controller = new ReactComponentsController();

Controller.registerComponent('test1', testComponent);

Controller.extendComponent('test1', {
    testMethod(){
        return 'extended test method';
    },
    render(){
        return (<div>extended: {this.testMethod()}</div>);
    }
});

extendController(controller)

• controller - [DynamicController] more important controller that will overwrite old controller

const Controller = new ReactComponentsController();
const Controller2 = new ReactComponentsController();

Controller.registerComponent('test1', testComponent);

Controller2.registerComponent('test1', testComponent2);
Controller2.registerComponent('test2', testComponent2);

Controller.extendController(Controller2);

getComponent(componentName, props, options)

• componentName - [String] name of virtual instance where Your component will be displayed
• props - [Object] Props that React Component will have
• options - [Object] additional information. You can use it in the component and overwrite defined options

const Controller = new ReactComponentsController();
Controller.registerComponent('test1', testComponent);


export default ({someParam}) => (
    <div>{Controller.getComponent('test1', someParam)}</div>
)