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

Property

Type

Description

config

Object

Reference to the Toolkit configuration object

Read-only

debug

Boolean

Whether the Toolkit is in debug mode

Default: false

fullscreen

Boolean

Whether the Toolkit is in fullscreen mode or not

os

String

The current operating system

Read-only

ENUMS

Object

Reference to the Toolkit enum object

Read-only

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)

Parameter

Type

Description

code

String

The code string value to format

options

Object

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

Parameter

Type

Description

key

Mixed

String: The object path of the configuration value you are setting

Object: The value will be merged with the current config object.

value

Mixed

The new 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)

Parameter

Type

Description

event

String

The event name

callback

Function

Reference to the function run when the event is triggered

id

String

Unique id assigned to the subscription

Optional

unsubscribe()

Unsubscribe from Toolkit events.

Parameter

Type

Description

id

String

Unique id assigned to the subscription

event

String

The event name

callback

Function

Reference to the function run when the event is triggered

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