A pack of extensions for grommet 2
Edit this page
created:2/22/2021
,
updated:2/22/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
grommet-controls
3.0.1
created:1 year ago
updated:5 months ago
commits:3
source lines:4
comments %:150
created:1 year ago
updated:5 months ago
commits:2
source lines:7
comments %:71
created:1 year ago
updated:1 year ago
commits:1
source lines:4
comments %:125
created:1 year ago
updated:1 year ago
commits:1
source lines:4
comments %:125
created:1 year ago
updated:1 year ago
commits:1
source lines:4
comments %:125
created:1 year ago
updated:1 year ago
commits:1
source lines:4
comments %:125
created:1 year ago
updated:1 year ago
commits:1
source lines:4
comments %:125
created:1 year ago
updated:1 year ago
commits:1
source lines:4
comments %:125

Controls

An image with some text, can be used as a user Avatar image

Adam Smithadmin
created:1 year ago
updated:5 months ago
commits:4
source lines:18
comments %:17

A Card-type container, all props of Box apply

Info card

sub-title info
created:1 year ago
updated:5 months ago
commits:3
source lines:98
comments %:12

A color selection element, with custom color palettes.

created:1 year ago
updated:5 months ago
commits:4
source lines:263
comments %:3

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

created:1 year ago
updated:5 months ago
commits:5
source lines:16
comments %:19

A small image stamp used for avatars or image thumbnails

created:1 year ago
updated:5 months ago
commits:2
source lines:17
comments %:18

A Box to display notification messages.

created:1 year ago
updated:5 months ago
commits:3
source lines:181
comments %:2

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:5 months ago
commits:3
source lines:69
comments %:6

A spinning process indicator.

created:1 year ago
updated:5 months ago
commits:3
source lines:59
comments %:8

A tag control with a label and icon.

Tag
created:1 year ago
updated:5 months ago
commits:6
source lines:99
comments %:3

A single value visualization with a label.

30%
last quarter sales
created:1 year ago
updated:5 months ago
commits:4
source lines:44
comments %:7

Input

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

created:1 year ago
updated:5 months ago
commits:4
source lines:97
comments %:4

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

created:1 year ago
updated:5 months ago
commits:3
source lines:72
comments %:6

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

created:1 year ago
updated:5 months ago
commits:4
source lines:160
comments %:5

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

created:1 year ago
updated:5 months ago
commits:3
source lines:7
comments %:57

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

created:1 year ago
updated:5 months ago
commits:3
source lines:97
comments %:11

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

created:1 year ago
updated:5 months ago
commits:3
source lines:199
comments %:4
PasswordInput

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

created:1 year ago
updated:5 months ago
commits:6
source lines:43
comments %:9

A list of tags that can be removed.

created:1 year ago
updated:5 months ago
commits:2
source lines:181
comments %:3

Layout

A page header component

$ npm install grommet-controlsimport { Header } from 'grommet-controls';<Header>   ...</Header>

app title

created:1 year ago
updated:5 months ago
commits:2
source lines:21
comments %:43

Collapsible side bar component

$ npm install grommet-controlsimport { Sidebar } from 'grommet-controls';<Sidebar title='My title'>   ...</Sidebar>

My title

Side item
created:1 year ago
updated:5 months ago
commits:3
source lines:61
comments %:13

Navigation

VerticalMenu

Hierarchical collapsible menu

$ npm install grommet-controls\nimport { VerticalMenu } from 'grommet-controls';\n<VerticalMenu items={...} onSelect={...} />

created:1 year ago
updated:5 months ago
commits:4
source lines:278
comments %:3

Validation

created:1 year ago
updated:5 months ago
commits:3
source lines:24
comments %:

A Color selection field with form validation

created:1 year ago
updated:5 months ago
commits:2
source lines:9
comments %:33

A Date input field with form validation

created:1 year ago
updated:5 months ago
commits:2
source lines:10
comments %:30

An email input field with form validation

created:1 year ago
updated:5 months ago
commits:2
source lines:10
comments %:30
Form

A Form with built-in validation.

created:1 year ago
updated:5 months ago
commits:7
source lines:229
comments %:4

A masked input field with form validation

created:1 year ago
updated:5 months ago
commits:2
source lines:10
comments %:30

A numeric input field with form validation

created:1 year ago
updated:5 months ago
commits:2
source lines:10
comments %:30

A password input field with form validation

created:1 year ago
updated:5 months ago
commits:2
source lines:10
comments %:30

A Select field with form validation

created:1 year ago
updated:5 months ago
commits:2
source lines:8
comments %:38

A TextArea field with form validation

created:1 year ago
updated:5 months ago
commits:2
source lines:12
comments %:25

A TextInput field with form validation

created:1 year ago
updated:5 months ago
commits:2
source lines:13
comments %:23