grommet-controls
v3.0.2
Published
grommet 2 controls
Downloads
1,437
Maintainers
Readme
Grommet Controls: a pack of extensions for Grommet 2
Visit the Grommet 2 website if you are not familiar with Grommet.
Documentation
Visit the grommet-controls website for more information.
Support / Contributing
Before opening an issue or pull request, please read the Contributing guide.
Sample App
The quickest way to get started is to clone the Grommet Controls Sample page.
Install
To install Grommet Controls:
$ npm install grommet-controls
Configuration
To avoid the entire library being pulled into your bundles when using member imports, you can use babel-plugin-transform-imports
and configure your .babelrc
file:
$npm install -save-dev babel-plugin-transform-imports
edit .babelrc:
...
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false }],
["transform-imports", {
"grommet-controls": {
"transform": "grommet-controls/es6/components/${member}",
"preventFullImport": true,
"skipDefaultConversion": true
},
"grommet-controls/chartjs": {
"transform": "grommet-controls/es6/chartjs/${member}",
"preventFullImport": true,
"skipDefaultConversion": true
},
"grommet-controls/themes": {
"transform": "grommet-controls/es6/themes/${member}",
"preventFullImport": true
},
"grommet": {
"transform": "grommet/es6/components/${member}",
"preventFullImport": true,
"skipDefaultConversion": true
},
"grommet/contexts": {
"transform": "grommet/es6/contexts/${member}",
"preventFullImport": true,
"skipDefaultConversion": true
},
"grommet/themes": {
"transform": "grommet/es6/themes/${member}",
"preventFullImport": true,
"skipDefaultConversion": true
},
"grommet/components/hocs": {
"transform": "grommet/es6/components/hocs",
"preventFullImport": true,
"skipDefaultConversion": true
},
"grommet-icons/contexts": {
"transform": "grommet-icons/es6/contexts/${member}",
"preventFullImport": true,
"skipDefaultConversion": true
},
"grommet-icons": {
"transform": "grommet-icons/es6/icons/${member}",
"preventFullImport": false,
"skipDefaultConversion": true
}
}]
],
...
Components
- PagingTable A Grommet 2 table component with pagination, filtering, footer, child rows and grouping.
- Card A Card-type container.
- Tag A tag control with a label and icon.
- Tags A list of tags that can be removed.
- Notification A Box to display notification messages.
- Colors A color selection element, with custom color palettes.
- ImageStamp A small image stamp used for avatars or image thumbnails.
- DropInput An Input control with an optional drop button with the specified 'dropContent' or widgets.
- MaskedInput A masked Input control with an optional drop button with the specified 'dropContent'.
- DateInput A masked date entry field with a drop down calendar.
- NumberInput A masked number input, with widgets to increment/decrement the value. Automatically converts the value to a numeric type, so you dont have to parse strings in your onChange event.
- PasswordInput A password field with show/hide password toggle.
- EmailInput A masked input with a default mask for handling email addresses.
- ColorInput A masked color entry field, with a drop button to select a color.
- Form A Form with built-in validation.
- Spinning A spinning process indicator.
- Value A single value with a label.
- Sidebar Collapsible side bar component.
- VerticalMenu Hierarchical collapsible menu.
Charts (chart.js)
$ npm install chart.js
$ npm install react-chartjs-2