@zippytech/react-simple-toolbar

react-simple-toolbar

Why ?

Enables you to easily layout items in a toolbar with custom align options.

Install

$ npm i @zippytech/react-simple-toolbar

Usage

import '@zippytech/react-simple-toolbar/index.css'
import Toolbar, { Region } from '@zippytech/react-simple-toolbar'

<Toolbar>
  <Region>
    <button>start button</button>
  </Region>

  <Region>
    <button>end button</button>
  </Region>
</Toolbar>

In most of the cases, you will have up to 3 regions in the toolbar. A Region can specify an align property. If it does not, it will default to the following:

• if you don't have a region, a default region will be created, with align "start"
• if you only have one region, it will have align "start" by default
• if you have two regions, they will have align "start" and "end" respectively.
• if you have three regions, they will have align "start", "center" and "end" respectively.

You can customize the align prop of each region explicitly.

Regions are basically flex items, with a default flex of 1. This can also be customized.

import '@zippytech/react-simple-toolbar/index.css'
import Toolbar, { Region } from '@zippytech/react-simple-toolbar'

<Toolbar>
  <Region flex={1}>
    <button>start button</button>
  </Region>

  <Region align="center" flex={2}>
    <button>centered button</button>
  </Region>

  <Region flex={3}>
    <button>end button</button>
  </Region>
</Toolbar>

When you specify no region, one will be created for you out-of-the-box.

<Toolbar>
  <button>A button</button>
</Toolbar>
// becomes
<Toolbar>
  <Region><button>A button</button></Region>
</Toolbar>

Props

• theme: String - defaults to "default"
• padding: Number - the padding to apply to the toolbar contents.

Region Props

• align: String - one of "start", "center", "end"
• flex: Number - a numeric value for region flex

Other

By default, the Toolbar has overflow: hidden in css. If you don't want that, make sure you specify a className or a style object with a different value for overflow. This is especially useful when rendering combo-boxes or other complex components that at times need to expand beyond the toolbar bounding rect.

Also note that react-simple-toolbar and all it's descendents are rendered with box-sizing: border-box. This is generally the most natural box-sizing, but in some cases you might want some of the nodes in the toolbar to have a different value. If that's the case, you should explicitly specify a different box-sizing for your components.

LICENSE

Apache2