Toolbar Elements

If you have created an element using the ARCLI you will notice that the generated component uses the Element wrapper component:

/Reactium Project/src/app/component/Toolkit/Test/index.js
import React from 'react';
import { useHookComponent } from 'reactium-core/sdk';

export default () => {
    const { Element } = useHookComponent('RTK');

    return <Element title='Test'>Test Element</Element>;
};

The Element wrapper component adds the Toolbar component which has a zone included that allows you to add elements to the Toolbar.

Toolbar Zone

Adding Toolbar Elements

You can add Toolbar elements by registering a component with the Toolkit SDK.

/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.Toolkit.Toolbar.register('CustomButton', {
        align: Reactium.Toolkit.Toolbar.align.left,
        component: <button>CustomButton</button>,
        order: Reactium.Enums.priority.neutral,
    });
});

You can temporarily register Toolbar elements within a useEffect:

/Reactium Project/src/app/component/Toolkit/Test/index.js
import React, { useEffect } from 'react';
import Reactium, { useHookComponent } from 'reactium-core/sdk';


const TestToolbarButton = () => <button>Test</button>;


export default () => {
    useEffect(() => {
    
        // Ensure the Toolbar is visible
        Reactium.Toolkit.setFullscreen(false);

        // Register the TestToolbarButton
        Reactium.Toolkit.Toolbar.register('TestToolbarButton', {
            align: Reactium.Toolkit.Toolbar.align.right,
            component: TestToolbarButton,
        });

        // Unregister TestToolbarButton on unmount
        return () => {
            Reactium.Toolkit.Toolbar.unregister('TestToolbarButton');
        };
    }, []);

    return <div>Test Element</div>;
};

Using the Element wrapper component, you can add temporary Toolbar elements by specifying the toolbar property:

/Reactium Project/src/app/component/Toolkit/Test/index.js
import React from 'react';
import { useHookComponent } from 'reactium-core/sdk';


const TestToolbarButton = () => <button>Test</button>;


export default () => {
    const { Element } = useHookComponent('RTK');

    return (
        <Element 
            title='Test'
            toolbar={TestToolbarButton}>
            Test Element
        </Element>
    );
};

Registry Object

Property

Type

Description

align

String

The horizontal alignment of the component[left|right|center]

component

Node

React element to insert

order

Number

Index used to list the Toolbar components when rendering

Last updated