A pack of extensions for grommet 2
Edit this page
created:4/30/2021
updated:4/30/2021

Overview

grommet-controls is a collection of grommet 2-based components.

Install

$ npm install grommet-controls

Cross-usage

You can view a table with the cross-usage of the included components

Components

sort by:

Chartjs

BarChart
avatar of atanasster
grommet-controls
3.0.1
commits:
3
created:1 year ago
updated:7 months ago
loc
4
comments
150%
passed
5
failed
5
coverage
100%
created:1 year ago
updated:7 months ago
loc
7
comments
71%
passed
2
failed
2
coverage
100%
created:1 year ago
updated:1 year ago
loc
4
comments
125%
passed
2
failed
2
coverage
100%
created:1 year ago
updated:1 year ago
loc
4
comments
125%
passed
17
failed
17
coverage
100%
created:1 year ago
updated:1 year ago
loc
4
comments
125%
passed
2
failed
2
coverage
100%
created:1 year ago
updated:1 year ago
loc
4
comments
125%
passed
2
failed
2
coverage
100%
created:1 year ago
updated:1 year ago
loc
4
comments
125%
passed
3
failed
3
coverage
100%
created:1 year ago
updated:1 year ago
loc
4
comments
125%
passed
4
failed
4
coverage
100%

Controls

created:1 year ago
updated:7 months ago
loc
18
comments
17%
failed
2
coverage
100%
An image with some text, can be used as a user Avatar image
Adam Smithadmin
created:1 year ago
updated:7 months ago
loc
98
comments
12%
passed
6
failed
10
coverage
88%
A Card-type container, all props of Box apply

Info card

sub-title info
created:1 year ago
updated:7 months ago
loc
263
comments
3%
passed
6
failed
6
coverage
66%

A color selection element, with custom color palettes.

created:1 year ago
updated:7 months ago
loc
16
comments
19%
passed
1
failed
1
coverage
100%

A Button with a hover effect, all properties of Button apply.

created:1 year ago
updated:7 months ago
loc
17
comments
18%
failed
4
coverage
67%

A small image stamp used for avatars or image thumbnails

created:1 year ago
updated:7 months ago
loc
181
comments
2%
passed
12
failed
12
coverage
92%

A Box to display notification messages.

created:1 year ago
updated:7 months ago
loc
69
comments
6%
failed
4
coverage
48%
Table component with pagination, filtering, footer, child rows and grouping. Derived from https://github.com/react-tools/react-table.
Inventory
Item
Qty
Price
Total
Fork
4
5.5
22
Fork
1
5.2
5.2
Knife
3
2.5
7.5
Spoon
2
6.5
13
Sum 40.44
created:1 year ago
updated:7 months ago
loc
59
comments
8%
passed
4
failed
4
coverage
67%

A spinning process indicator.

created:1 year ago
updated:7 months ago
loc
99
comments
3%
passed
12
failed
12
coverage
75%

A tag control with a label and icon.

Tag
created:1 year ago
updated:7 months ago
loc
44
comments
7%
passed
6
failed
6
coverage
67%

A single value visualization with a label.

30%
last quarter sales

Input

created:1 year ago
updated:1 week ago
loc
97
comments
4%
failed
4
coverage
25%

A masked color entry field, with a drop button to select a color. All properties of MaskedInput apply.

created:1 year ago
updated:7 months ago
loc
72
comments
6%
failed
16
coverage
67%

A masked date entry field with a drop down calendar. All properties of MaskedInput apply.

created:1 year ago
updated:7 months ago
loc
160
comments
5%
passed
10
failed
10
coverage
47%

An Input control with an optional drop button with the specified 'dropContent' or widgets.

created:1 year ago
updated:7 months ago
loc
7
comments
57%
failed
2
coverage
100%

A masked input with a default mask for handling email addresses. All properties of MaskedInput apply.

created:1 year ago
updated:7 months ago
loc
97
comments
11%
passed
4
failed
26
coverage
58%

A masked Input control with an optional drop button with the specified dropContent.

created:1 year ago
updated:7 months ago
loc
199
comments
4%
failed
26
coverage
27%

A masked number input, with widgets to increment/decrement the value. Additionally, all properties of MaskedInput apply.

PasswordInput
avatar of atanasster
avatar of Ivens Joris
avatar of GitHub
created:1 year ago
updated:7 months ago
loc
43
comments
9%
passed
1
failed
3
coverage
50%

A password field with show/hide password toggle. All properties of DropInput apply.

created:1 year ago
updated:7 months ago
loc
181
comments
3%
passed
10
failed
10
coverage
20%

A list of tags that can be removed.

Layout

created:1 year ago
updated:7 months ago
loc
21
comments
43%
failed
6
coverage
80%
A page header component
$ npm install grommet-controlsimport { Header } from 'grommet-controls';<Header>   ...</Header>

app title

created:1 year ago
updated:7 months ago
loc
61
comments
13%
passed
4
failed
4
coverage
75%
Collapsible side bar component
$ npm install grommet-controlsimport { Sidebar } from 'grommet-controls';<Sidebar title='My title'>   ...</Sidebar>

My title

Side item

Navigation

VerticalMenu
avatar of atanasster
avatar of Julien Bachmann
created:1 year ago
updated:7 months ago
loc
278
comments
3%
passed
2
failed
2
coverage
45%
Hierarchical collapsible menu
$ npm install grommet-controls\nimport { VerticalMenu } from 'grommet-controls';\n<VerticalMenu items={...} onSelect={...} />

Validation

created:1 year ago
updated:7 months ago
loc
24
comments
0
passed
3
failed
3
coverage
50%
created:1 year ago
updated:7 months ago
loc
9
comments
33%
passed
1
failed
3
coverage
100%
A Color selection field with form validation
created:1 year ago
updated:7 months ago
loc
10
comments
30%
passed
2
failed
4
coverage
100%
A Date input field with form validation
created:1 year ago
updated:7 months ago
loc
10
comments
30%
passed
2
failed
4
coverage
100%
An email input field with form validation
Form
avatar of atanasster
avatar of Atanas Stoyanov
avatar of GitHub
avatar of Bart Visscher
created:1 year ago
updated:7 months ago
loc
229
comments
4%
passed
4
failed
6
coverage
10%

A Form with built-in validation.

created:1 year ago
updated:7 months ago
loc
10
comments
30%
passed
3
failed
3
coverage
100%
A masked input field with form validation
created:1 year ago
updated:7 months ago
loc
10
comments
30%
passed
2
failed
4
coverage
100%
A numeric input field with form validation
created:1 year ago
updated:7 months ago
loc
10
comments
30%
passed
2
failed
4
coverage
100%
A password input field with form validation
created:1 year ago
updated:7 months ago
loc
8
comments
38%
failed
6
coverage
100%
A Select field with form validation
created:1 year ago
updated:7 months ago
loc
12
comments
25%
passed
2
failed
4
coverage
100%
A TextArea field with form validation
created:1 year ago
updated:7 months ago
loc
13
comments
23%
passed
2
failed
4
coverage
100%
A TextInput field with form validation