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

• BarChart
• DoughnutChart
• HorizontalBarChart
• LineChart
• PieChart
• PolarChart
• RadarChart
• ScatterChart