ToolBar - Getting started
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <ToolBar /> component, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/ToolBar and @zippytech/react-toolkit/ToolBar/index.css.
This is the most basic setup for a <ToolBar />. In the following sections we'll explore how to use the <ToolBar /> in various scenarios, styling and supported props.
The <ToolBar /> is a very useful tool for handling situations where the container containing different items is resized. There are two strategies handling the overflow:
  • dropdown - will render the hidden items inside a menu.
  • scroll - will render the hidden items inside a scroll container, that will scroll left/right on hover.
The <ToolBar /> has some very customizable components, which will be presented below.
The dropdown button can be customized via the renderDropdownButton prop.
The scroller can be customized via the renderScroller prop.