Toolkit SDK

The Toolkit plugin extends the Reactium SDK with the Toolkit namespace. There are a number of helpful functions on the Toolkit SDK but the primary usage is for registering items to the Toolkit plugin such as sidebar, toolbar, and content elements.

Usage

reactium-hooks.js
import Reactium from 'reactium-core/sdk';

Reactium.Plugin.register('MyPlugin').then(() => {
    console.log(Reactium.Toolkit.version);
});

Properties

Methods

codeFormat()

Returns a String that has been formatted by Prettier. This function is used in the Code component render.

codeFormat(code:String, options:Object:Optional)

copy()

Copy a string to the clipboard.

copy(text:String)

import React, { useCallback } from 'react';
import Reactium from 'reactium-core/sdk';

const MyComponent = () => {
    
    const onClick = useCallback(() => {
        Reactium.Toolkit.copy('Something was copied!');
    });
    
    return <button onClick={onClick}>Copy Something!</button>;
});

cx()

Reference to the Toolkit className extension rtk.

cx('some-class')

Returns: rtk-some-class

setConfig()

Set Toolkit configuration value.

There are two ways to set config

setConfig(key:String, value:Mixed)

// Key/Value Method:
Reactium.Toolkit.setConfig('sidebar.width', 500);

setConfig(value:Object)

// Merged Object
Reactium.Toolkit.setConfig({ brand: 'My Brand Name' }); 

See: Configuration for more details

setDebug()

Set the Toolkit debug mode. Useful when subscribing to events and tracking down where errors occur.

setDebug(Boolean)

MyComponent.js
import React, { useEffect, useState } from 'react';
import Reactium from 'reactium-core/sdk';

export default () => {
    const [debug, updateDebug] = useState(Reactium.Toolkit.debug);

    const onDebugChange = ({ value }) => updateDebug(value);

    const toggle = () => Reactium.Toolkit.setDebug(!Reactium.Toolkit.debug);

    useEffect(() => Reactium.Toolkit.subscribe('debug', onDebugChange), []);

    return (
        <div>
            <h2>Toolkit Debug Mode {debug ? 'on' : 'off'}</h2>
            <div>
                <button onClick={toggle}>Toggle Debug</button>
            </div>
        </div>
    );
};

setFullscreen()

Toggle fullscreen mode.

setFullscreen(Boolean)

MyComponent.js
import React, { useCallback } from 'react';
import Reactium from 'reactium-core/sdk';

const MyComponent = () => {
    
    const onClick = useCallback(() => {
        Reactium.Toolkit.setFullscreen(true);
    });
    
    return <button onClick={onClick}>Fullscreen</button>;
};

subscribe()

Subscribe to Toolkit events.

subscribe(event:String, callback:Function, id:String:Optional)

unsubscribe()

Unsubscribe from Toolkit events.

There are two ways to unsubscribe from an event.

unsubscribe(id:String)

// Subscription ID Method: 

Reactium.Toolkit.subscribe('config', console.log, 'config-change'); 
Reactium.Toolkit.unsubscribe('config-change'); 

unsubscribe(event:String, callback:Function)

// Subscription Event/Callback Method: 

Reactium.Toolkit.subscribe('config', console.log);
Reactium.Toolkit.unsubscribe('config', console.log); 

Last updated