Additional components for react-toolbox components library
The project provides additions for react-toolbox library (http://react-toolbox.com/), 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.
Installation
React Toolbox can be installed as an npm package:
$ npm install react-toolbox-additions
Prerequisites
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.
Pager:
;; const PagerTest = { { console; } return <Pager prevButtonLabel=<FontIcon value='chevron_left' /> nextButtonLabel=<FontIcon value='chevron_right' /> rangeLeftButtonLabel=<FontIcon value='more_horiz' /> rangeRightButtonLabel=<FontIcon value='more_horiz' /> totalPages=29 currentPage=5 visiblePagesBlockSize=3 onPageChange=onPageChange /> ;};
Accordion:
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'; Component static propTypes = ; static defaultProps = state = index: 0 { this; } { console; } { console; } { console; } { return <Accordion = = = > <Chord ='Number One' = > <div => 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 </div> </Chord> <Chord = ='Number Two' = > <div = > <Input ='number' = ='Number' /> <Button ='Click Me' /> </div> </Chord> <Chord = ='Number Three' = = > <List > <ListSubHeader ='Contacts' /> <ListItem ='Inbox' ='inbox' /> <ListItem ='Outbox' = = ='send' /> <ListItem ='Trash' ='delete' /> <ListItem ='Spam' ='report' /> </List> </Chord> </Accordion> ; }
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
|---- readme.md
|---- theme.scss
Bundled component
;;;
Authors and Contributors
The project is being initially developed and maintained by Max Komlev.
Steps to build project and run example locally.
$ git clone https://github.com/MaximKomlev/react-toolbox-additions.git
$ 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.
Changes
License
This project is licensed under the terms of the MIT license.