grommet-controls is a collection of grommet 2-based components.
$ npm install grommet-controls
You can view a table with the cross-usage of the included components
Chartjs
Controls
An image with some text, can be used as a user Avatar image
A Card-type container, all props of Box apply
Info card
A color selection element, with custom color palettes.
A Button with a hover effect, all properties of Button apply.
A small image stamp used for avatars or image thumbnails
A Box to display notification messages.
Message heading
state labelSun, Aug 30, 2020, 11:14 PMTable component with pagination, filtering, footer, child rows and grouping. Derived from https://github.com/react-tools/react-table.
A spinning process indicator.
A tag control with a label and icon.
A single value visualization with a label.
Input
A masked color entry field, with a drop button to select a color. All properties of MaskedInput apply.
A masked date entry field with a drop down calendar. All properties of MaskedInput apply.
An Input control with an optional drop button with the specified 'dropContent' or widgets.
A masked input with a default mask for handling email addresses. All properties of MaskedInput apply.
A masked Input control with an optional drop button with the specified dropContent.
A masked number input, with widgets to increment/decrement the value. Additionally, all properties of MaskedInput apply.
A password field with show/hide password toggle. All properties of DropInput apply.
A list of tags that can be removed.
Layout
A page header component
$ npm install grommet-controlsimport { Header } from 'grommet-controls';<Header> ...</Header>
app title
Collapsible side bar component
$ npm install grommet-controlsimport { Sidebar } from 'grommet-controls';<Sidebar title='My title'> ...</Sidebar>
Navigation
Hierarchical collapsible menu
$ npm install grommet-controls\nimport { VerticalMenu } from 'grommet-controls';\n<VerticalMenu items={...} onSelect={...} />
Validation
A Color selection field with form validation
A Date input field with form validation
An email input field with form validation
A Form with built-in validation.
A masked input field with form validation
A numeric input field with form validation
A password input field with form validation
A Select field with form validation
A TextArea field with form validation
A TextInput field with form validation