A pack of extensions for grommet 2
created:7/7/2021
updated:7/7/2021

index

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

created:5 years ago
updated:4 years ago
loc
4
comments
150%
passed
5
failed
5
coverage
100%
created:5 years ago
updated:4 years ago
loc
7
comments
71%
passed
2
failed
2
coverage
100%
created:5 years ago
updated:5 years ago
loc
4
comments
125%
passed
2
failed
2
coverage
100%
created:5 years ago
updated:5 years ago
loc
4
comments
125%
passed
17
failed
17
coverage
100%
created:5 years ago
updated:5 years ago
loc
4
comments
125%
passed
2
failed
2
coverage
100%
created:5 years ago
updated:5 years ago
loc
4
comments
125%
passed
2
failed
2
coverage
100%
created:5 years ago
updated:5 years ago
loc
4
comments
125%
passed
3
failed
3
coverage
100%
created:5 years ago
updated:5 years ago
loc
4
comments
125%
passed
4
failed
4
coverage
100%

Controls

created:5 years ago
updated:4 years 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:5 years ago
updated:4 years 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:5 years ago
updated:4 years ago
loc
263
comments
3%
passed
6
failed
6
coverage
66%

A color selection element, with custom color palettes.

created:5 years ago
updated:4 years ago
loc
16
comments
19%
passed
1
failed
1
coverage
100%
created:5 years ago
updated:4 years ago
loc
17
comments
18%
failed
4
coverage
50%

A small image stamp used for avatars or image thumbnails

created:5 years ago
updated:4 years ago
loc
181
comments
2%
failed
24
coverage
92%

A Box to display notification messages.

created:5 years ago
updated:4 years 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:5 years ago
updated:4 years ago
loc
59
comments
8%
passed
4
failed
4
coverage
67%

A spinning process indicator.

created:5 years ago
updated:4 years ago
loc
99
comments
3%
passed
12
failed
12
coverage
50%
created:5 years ago
updated:4 years ago
loc
44
comments
7%
passed
6
failed
6
coverage
67%

A single value visualization with a label.

30%
last quarter sales

Input

created:5 years ago
updated:3 years ago
loc
97
comments
4%
failed
4
coverage
25%
created:5 years ago
updated:4 years ago
loc
72
comments
6%
failed
16
coverage
67%
created:5 years ago
updated:4 years ago
loc
160
comments
5%
passed
10
failed
10
coverage
47%
created:5 years ago
updated:4 years ago
loc
7
comments
57%
failed
2
coverage
100%
created:5 years ago
updated:4 years ago
loc
97
comments
11%
passed
4
failed
26
coverage
58%
created:5 years ago
updated:4 years ago
loc
199
comments
4%
failed
26
coverage
27%
created:5 years ago
updated:4 years ago
loc
43
comments
9%
passed
1
failed
3
coverage
50%
created:5 years ago
updated:4 years ago
loc
181
comments
3%
passed
10
failed
10
coverage
20%

A list of tags that can be removed.

Layout

created:5 years ago
updated:4 years ago
loc
21
comments
43%
failed
6
coverage
100%
A page header component
$ npm install grommet-controlsimport { Header } from 'grommet-controls';<Header>  ...</Header>

app title

created:5 years ago
updated:4 years 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

created:5 years ago
updated:4 years 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:5 years ago
updated:4 years ago
loc
24
comments
0
passed
3
failed
3
coverage
50%
created:5 years ago
updated:4 years ago
loc
9
comments
33%
passed
1
failed
3
coverage
100%
A Color selection field with form validation
created:5 years ago
updated:4 years ago
loc
10
comments
30%
passed
2
failed
4
coverage
100%
created:5 years ago
updated:4 years ago
loc
10
comments
30%
passed
2
failed
4
coverage
100%
created:5 years ago
updated:4 years ago
loc
229
comments
4%
passed
4
failed
6
coverage
10%

A Form with built-in validation.

created:5 years ago
updated:4 years ago
loc
10
comments
30%
passed
3
failed
3
coverage
100%
created:5 years ago
updated:4 years ago
loc
10
comments
30%
passed
2
failed
4
coverage
100%
created:5 years ago
updated:4 years ago
loc
10
comments
30%
passed
2
failed
4
coverage
100%
created:5 years ago
updated:4 years ago
loc
8
comments
38%
failed
6
coverage
100%
A Select field with form validation
created:5 years ago
updated:4 years ago
loc
12
comments
25%
passed
2
failed
4
coverage
100%
created:5 years ago
updated:4 years ago
loc
13
comments
23%
passed
2
failed
4
coverage
100%