> For the complete documentation index, see [llms.txt](https://docs.reactium.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.reactium.io/reactium-toolkit/sdk.md).

# Toolkit SDK

The Toolkit plugin extends the [**Reactium SDK**](/reactium/reactium-sdk.md) 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

{% code title="reactium-hooks.js" %}

```jsx
import Reactium from 'reactium-core/sdk';

Reactium.Plugin.register('MyPlugin').then(() => {
    console.log(Reactium.Toolkit.version);
});
```

{% endcode %}

## Properties

| Property       | Type      | Description                                                                                        |
| -------------- | --------- | -------------------------------------------------------------------------------------------------- |
| **config**     | `Object`  | <p>Reference to the Toolkit configuration object</p><p><strong><code>Read-only</code></strong></p> |
| **debug**      | `Boolean` | <p>Whether the Toolkit is in debug mode</p><p><strong><code>Default: false</code></strong></p>     |
| **fullscreen** | `Boolean` | Whether the Toolkit is in fullscreen mode or not                                                   |
| **os**         | `String`  | <p>The current operating system</p><p><strong><code>Read-only</code></strong></p>                  |
| **ENUMS**      | `Object`  | <p>Reference to the Toolkit enum object</p><p><strong><code>Read-only</code></strong></p>          |

## Methods

### codeFormat()

Returns a String that has been formatted by [Prettier](https://prettier.io/). This function is used in the Code component render.

**`codeFormat(code:String, options:Object:Optional)`**&#x20;

{% tabs %}
{% tab title="Params" %}

| Parameter    | Type     | Description                                                                 |
| ------------ | -------- | --------------------------------------------------------------------------- |
| **code**     | `String` | The code string value to format                                             |
| **options**  | `Object` | <p>Prettier options object</p><p><strong><code>Optional</code></strong></p> |
| {% endtab %} |          |                                                                             |

{% tab title="Usage" %}
{% code title="MyCodeBlock.js" %}

```jsx
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>;
});
```

{% endcode %}
{% endtab %}

{% tab title="Prettier Options" %}

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

{% endtab %}
{% endtabs %}

### copy()

Copy a string to the clipboard.&#x20;

**`copy(text:String)`**

{% tabs %}
{% tab title="Usage" %}

```javascript
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>;
});
```

{% endtab %}
{% endtabs %}

### cx()

Reference to the Toolkit className extension **rtk.**

**`cx('some-class')`**

**Returns:** rtk-some-class

### setConfig()

Set Toolkit configuration value.&#x20;

{% tabs %}
{% tab title="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.                                         |
| {% endtab %} |         |                                                                      |

{% tab title="Usage" %}

```javascript
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 }); 
});
```

{% endtab %}
{% endtabs %}

There are two ways to set config

**`setConfig(key:String, value:Mixed)`**

```jsx
// Key/Value Method:
Reactium.Toolkit.setConfig('sidebar.width', 500);
```

**`setConfig(value:Object)`**&#x20;

```jsx
// Merged Object
Reactium.Toolkit.setConfig({ brand: 'My Brand Name' }); 
```

{% hint style="info" %}
**See:** [Configuration](/reactium-toolkit/config.md) for more details
{% endhint %}

### setDebug()

Set the Toolkit debug mode. Useful when subscribing to events and tracking down where errors occur.&#x20;

**`setDebug(Boolean)`**

{% tabs %}
{% tab title="Usage" %}
{% code title="MyComponent.js" %}

```jsx
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>
    );
};
```

{% endcode %}
{% endtab %}
{% endtabs %}

### setFullscreen()

Toggle fullscreen mode.

**`setFullscreen(Boolean)`**

{% tabs %}
{% tab title="Usage" %}
{% code title="MyComponent.js" %}

```javascript
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>;
};
```

{% endcode %}
{% endtab %}
{% endtabs %}

### subscribe()

Subscribe to Toolkit events.&#x20;

**`subscribe(event:String, callback:Function, id:String:Optional)`**

{% tabs %}
{% tab title="Params" %}

| Parameter    | Type       | Description                                                                                |
| ------------ | ---------- | ------------------------------------------------------------------------------------------ |
| **event**    | `String`   | The event name                                                                             |
| **callback** | `Function` | Reference to the function run when the event is triggered                                  |
| **id**       | `String`   | <p>Unique id assigned to the subscription</p><p><strong><code>Optional</code></strong></p> |
| {% endtab %} |            |                                                                                            |

{% tab title="Usage" %}
{% code title="MyComponent.js" %}

```jsx
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>
    );
};
```

{% endcode %}
{% endtab %}
{% endtabs %}

### unsubscribe()

Unsubscribe from Toolkit events.

{% tabs %}
{% tab title="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 |
| {% endtab %} |            |                                                           |

{% tab title="Usage" %}
{% code title="MyComponent.js" %}

```jsx
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>
    );
};
```

{% endcode %}
{% endtab %}
{% endtabs %}

There are two ways to unsubscribe from an event.&#x20;

**`unsubscribe(id:String)`**

```jsx
// Subscription ID Method: 

Reactium.Toolkit.subscribe('config', console.log, 'config-change'); 
Reactium.Toolkit.unsubscribe('config-change'); 
```

**`unsubscribe(event:String, callback:Function)`**

```jsx
// Subscription Event/Callback Method: 

Reactium.Toolkit.subscribe('config', console.log);
Reactium.Toolkit.unsubscribe('config', console.log); 
```