Visit the Grommet 2 website if you are not familiar with Grommet.
Visit the grommet-controls 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
}
}]
],
...
$ npm install chart.js
$ npm install react-chartjs-2