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>;
        });
    });
});
Last modified 2yr ago