Reactium
Search
⌃K

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
Usage
Prettier Options
Parameter
Type
Description
code
String
The code string value to format
options
Object
Prettier options object
Optional
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>;
});
{
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
Usage
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.
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
Usage
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
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
Usage
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
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);