Customization

The Reactium Toolkit can be customized to fit your design aesthetic and extended to add new functionality.

Logo

You can replace the logo by registering a component with an ID of RTKLOGO

/CustomLogo/reactium-hooks.js

import CustomLogo from '.';
import Reactium from 'reactium-core/sdk'; 

Reactium.Plugin.register('CustomLogo').then(() => {

    // Ensure the toolkit plugin is available
    if (!Reactium.Toolkit) return;
    
    // Replace Logo on plugin-ready
    Reactium.Hook.register('plugin-ready', () => {
        Reactium.Component.register('RTKLOGO', CustomLogo);
    });
});

Brand Name

You can replace the default brand name by registering a configuration hook and setting the brand property to your custom component or string.

/MyPlugin/reactium-hooks.js

import Reactium from 'reactium-core/sdk'; 

Reactium.Plugin.register('MyPlugin').then(() => {

    // Ensure the toolkit plugin is available
    if (!Reactium.Toolkit) return;
    
    Reactium.Hook.register('plugin-ready', () => {
    
        // Register Toolkit config override
        Reactium.Hook.registerSync('rtk-config', config => {
            config.brand = <div>My Awesome Brand</div>;
        });
    });
});

Version Info

You can replace the default version info by registering a configuration hook and setting the info property to your custom component or string.

/MyPlugin/reactium-hooks.js

import Reactium from 'reactium-core/sdk'; 

Reactium.Plugin.register('MyPlugin').then(() => {
    
    // Ensure the toolkit plugin is available
    if (!Reactium.Toolkit) return;

    Reactium.Hook.register('plugin-ready', () => {
    
        // Register Toolkit config override
        Reactium.Hook.registerSync('rtk-config', config => {
            config.info = <div>Style Guide</div>;
        });
    });
});