# 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**

{% code title="/CustomLogo/reactium-hooks.js" %}

```javascript
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);
    });
});
```

{% endcode %}

## 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. 

{% code title="/MyPlugin/reactium-hooks.js" %}

```javascript
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>;
        });
    });
});
```

{% endcode %}

## 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.

{% code title="/MyPlugin/reactium-hooks.js" %}

```javascript
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>;
        });
    });
});
```

{% endcode %}