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.
reactium-hooks.js
import Reactium from 'reactium-core/sdk';
Reactium.Plugin.register('MyPlugin').then(() => {
console.log(Reactium.Toolkit.version);
});
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 |
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 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>;
});
Reference to the Toolkit className extension rtk.
cx('some-class')Returns: rtk-some-class
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' });
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>
);
};
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 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 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);
Last modified 2yr ago