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.
/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
Select
/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>
);
};
export const Select = props => (
<select {...props}>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
);
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
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. 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.
Last modified 2yr ago