TypeScript icon, indicating that this package has built-in type declarations

1.3.9 • Public • Published

Additional components for react-toolbox components library

npm version

The project provides additions for react-toolbox library (, which are not defined at material design and therefore were not included to original react-toolbox components library, but it could be useful to have.


React Toolbox can be installed as an npm package:

$ npm install react-toolbox-additions


React Toolbox Additions require uses react-toolbox components library and react.

Like react-toolbox authors I also would recommend webpack to use module bundler.

The components can be customized via themes by using react-css-themr which is also used by React Toolbox to make component easily themeable.

Basic usage

Examples how to use.


import Pager from 'react-toolbox-additions/lib/pager';
import FontIcon from 'react-toolbox-additions/lib/font_icon';
const PagerTest = () => {
    onPageChange = (newPage, oldPage) => {'Selected page : ' + newPage + ', Previous page: ' + oldPage);
    return (
        prevButtonLabel={(<FontIcon value='chevron_left' />)}
        nextButtonLabel={(<FontIcon value='chevron_right' />)}
        rangeLeftButtonLabel={(<FontIcon value='more_horiz' />)}
        rangeRightButtonLabel={(<FontIcon value='more_horiz' />)}


import React, { PropTypes } from 'react';
import FontIcon from 'react-toolbox/lib/font_icon';
import Input from 'react-toolbox/lib/input';
import {Button} from 'react-toolbox/lib/button';
import { ListCheckbox, ListSubHeader, List, ListItem, ListDivider, ListItemText, ListItemContent } from 'react-toolbox/lib/list';
import { Accordion, Chord } from 'react-toolbox-additions/lib/accordion';
import style from '../style';
class AccordionTest extends React.Component {
  static propTypes = {
  static defaultProps = {
  state = {
    index: 0
  onChange = (idx) => {
      index: idx
  onActive1 = () => {'Selected chord: ' + this.state.index);
  onActive2 = () => {'Selected chord: ' + this.state.index);
  onActive3 = () => {'Selected chord: ' + this.state.index);
  render () {
    return (
          label='Number One'
          <div className={style['accordion-body2']}>
            The project provides additions for react-toolbox which are not defined at material design and therefore were not included to original react-toolbox components library but it could be useful to have.
          labelIcon={<FontIcon value='build' />}
          label='Number Two'
          <div className={style['accordion-body1']} >
              label='Click Me'
          label='Number Three'
          labelPostIcon={this.state.index1 === 2 ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
          <List selectable ripple>
            <ListSubHeader caption='Contacts' />
            <ListItem caption='Inbox' leftIcon='inbox' />
            <ListItem caption='Outbox' selectable={false} ripple={false} leftIcon='send' />
            <ListItem caption='Trash' leftIcon='delete' />
            <ListItem caption='Spam' leftIcon='report' />

Also important notice from authors of react-toolbox: "Take into account that any required style will be included in the final CSS so your final would include Button styles in this case. It's more convenient to import components this way (or with raw imports) because if you require from the project root, every stylesheet of React Toolbox will be included, even if you don't use it."

Importing components

The project inherits the same style of component structures that is in react-toolbox project, what makes it easy to use for everybody who is familiar with react-toolbox components structure.

 |- /pager
 |---- pager.js
 |---- _config.scss
 |---- index.js
 |---- theme.scss

Bundled component

import { Pager } from 'react-toolbox-additions/lib/pager';
import { Accordion, Chord } from 'react-toolbox-additions/lib/accordion';
import { FilePicker } from 'react-toolbox-additions/lib/filepicker';

Authors and Contributors

The project is being initially developed and maintained by Max Komlev.

Steps to build project and run example locally.

$ git clone
$ npm install
$ npm run build
$ npm start

Local example will be available at http://localhost:8000/.

Components in bundle

Currently the library implements Pager, FilePicker and Accordion components.


The log of changes.


This project is licensed under the terms of the MIT license.

Package Sidebar


npm i react-toolbox-additions

Weekly Downloads






Last publish


  • maximkomlev