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
Copy import Reactium from 'reactium-core/sdk' ;
Reactium . Plugin .register ( 'MyPlugin' ) .then (() => {
console .log ( Reactium . Toolkit .version);
});
Properties
Reference to the Toolkit configuration object
Read-only
Whether the Toolkit is in debug mode
Default: false
Whether the Toolkit is in fullscreen mode or not
The current operating system
Read-only
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
The code string value to format
Prettier options object
Optional
Copy 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 >;
});
Copy {
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
Copy 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
String:
The object path of the configuration value you are setting
Object:
The value will be merged with the current config object.
The new configuration value.
Copy 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)
Copy // Key/Value Method:
Reactium . Toolkit .setConfig ( 'sidebar.width' , 500 );
setConfig(value:Object)
Copy // Merged Object
Reactium . Toolkit .setConfig ({ brand : 'My Brand Name' });
setDebug()
Set the Toolkit debug mode. Useful when subscribing to events and tracking down where errors occur.
setDebug(Boolean)
Usage
Copy 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
Copy 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
Reference to the function run when the event is triggered
Unique id assigned to the subscription
Optional
Copy 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
Unique id assigned to the subscription
Reference to the function run when the event is triggered
Copy 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)
Copy // Subscription ID Method:
Reactium . Toolkit .subscribe ( 'config' , console .log , 'config-change' );
Reactium . Toolkit .unsubscribe ( 'config-change' );
unsubscribe(event:String, callback:Function)
Copy // Subscription Event/Callback Method:
Reactium . Toolkit .subscribe ( 'config' , console .log);
Reactium . Toolkit .unsubscribe ( 'config' , console .log);