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)

Params

Parameter	Type	Description
code	String	The code string value to format
options	Object	Prettier options object Optional

Usage

MyCodeBlock.js

import React from 'react';
import Reactium from 'reactium-core/sdk';

const MyCodeBlock = () => {
    const markup = Reactium.Toolkit.codeFormat(`<div>   Some  ugly markup</div>`);
    return <pre><code>{markup}</code></pre>;
});

Prettier Options

{
    tabWidth: 2,
    printWidth: 80,
    parser: 'babel',
    singleQuote: true,
    trailingComma: 'es5',
    jsxSingleQuote: true,
    jsxBracketSameLine: true,
    plugins: [parserbabel, parserHtml],
}

copy()

Copy a string to the clipboard.

copy(text:String)

Usage

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.

Params

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.

Usage

import Reactium from 'reactium-core/sdk';

Reactium.Plugin.register('MyPlugin').then(() => {

    // Set config from key/value
    Reactium.Toolkit.setConfig('sidebar.width', 400);
    
    // Set config from object
    const sidebar = { 
        ...Reactium.Toolkit.config.sidebar, 
        width: 400 
    };
    
    Reactium.Toolkit.setConfig({ sidebar }); 
});

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)

Usage

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)

Usage

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)

Params

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

Usage

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);

    // Subscribe/Unsubscribe on mount/unmount
    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>
    );
};

unsubscribe()

Unsubscribe from Toolkit events.

Params

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

Usage

MyComponent.js

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

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

    const [collapsed, update] = useState(Reactium.Toolkit.debug);

    const onCollapse = () => {
        update(true);
        Reactium.Toolkit.unsubscribe('collapse', onCollapse);
    };

    useEffect(() => {
        Reactium.Toolkit.subscribe('collapse', onCollapse);
    }, []);

    return (
        <Element title='Sidebar Watcher'>
            <h2>{collapsed ? 'Collapsed' : 'Expanded'}</h2>
        </Element>
    );
};

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);