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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.reactium.io/reactium-toolkit/sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.