Element

Render component for Toolkit sections

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

/MyToolkitElement.js

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

const MyToolkitElement = () => {

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

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

Using the example above, let's add a select input to the Toolbar:

Element

/MyToolkitElement.js

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

Select

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

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	Grid size when the viewport is xs Default: 12
sm	Number 1-12	Grid size when the viewport is sm Default: null
md	Number 1-12	Grid size when the viewport is md Default: null
lg	Number 1-12	Grid size when the viewport is lg Default: null

Any additional props are passed to the container div

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.

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.