Visit the Grommet 2 website if you are not familiar with Grommet.
Visit the grommet-nextjs website for more information.
Before opening an issue or pull request, please read the Contributing guide.
The quickest way to get started is to clone the Grommet Controls Sample page.
To install Grommet Controls:
$ npm install grommet-controls
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
}
}]
],
...
- 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