> 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/components/element.md).

# Element

When creating Toolkit sections you can wrap your component in the Element component to apply general styling and sizing attributes as well as a heading for the page and toolbar components specific to the element. 

## Usage

{% code title="/MyToolkitElement.js" %}

```jsx
import React from 'react'; 
import { useHookComponent } from 'reactium-core/sdk'; 

const MyToolkitElement = () => {

    const { Element } = useHookComponent('RTK');

    return (
        <Element title='Buttons'>
            My Buttons
        </Element>
    );
};
```

{% endcode %}

Using the example above, let's add a select input to the Toolbar:&#x20;

{% tabs %}
{% tab title="Element" %}
{% code title="/MyToolkitElement.js" %}

```jsx
import React from 'react'; 
import { Select } from './Select;
import { useHookComponent } from 'reactium-core/sdk'; 

const MyToolkitElement = () => {

    const { Element } = useHookComponent('RTK');

    return (
        <Element title='Buttons' toolbar={Select}>
            My Buttons
        </Element>
    );
};
```

{% endcode %}
{% endtab %}

{% tab title="Select" %}

```javascript
export const Select = props => (
    <select {...props}>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
);
```

{% endtab %}
{% endtabs %}

## Properties

| Property       | Type          | Description                                                                                         |
| -------------- | ------------- | --------------------------------------------------------------------------------------------------- |
| **children**   | `Node`        | The content of the Element                                                                          |
| **className**  | `String`      | Class name to apply to the wrapper div                                                              |
| **fullscreen** | `Boolean`     | Toggle the fullscreen mode of the toolkit                                                           |
| **title**      | `Node`        | Title component or string to render in the toolbar                                                  |
| **toolbar**    | `Node`        | Temporary Toolbar component                                                                         |
| **xs**         | `Number 1-12` | <p>Grid size when the viewport is <em>xs</em></p><p><strong><code>Default: 12</code></strong></p>   |
| **sm**         | `Number 1-12` | <p>Grid size when the viewport is <em>sm</em></p><p><strong><code>Default: null</code></strong></p> |
| **md**         | `Number 1-12` | <p>Grid size when the viewport is <em>md</em></p><p><strong><code>Default: null</code></strong></p> |
| **lg**         | `Number 1-12` | <p>Grid size when the viewport is <em>lg</em></p><p><strong><code>Default: null</code></strong></p> |

{% hint style="info" %}
Any additional props are passed to the container div
{% endhint %}

### fullscreen

This property causes the Element component to call `Reactium.Toolkt.setFullscreen()` as a side-effect. When rendering multiple Element components in a single view, the last Element component rendered will be the most recent value of the `Reactium.Toolkit.fullscreen` property.&#x20;

### title

If you're rendering multiple Element components in a single view and set the title property on each, you will see multiple titles in the Toolbar.&#x20;