created:7/7/2021

updated:7/7/2021

internal usage

Components JSX stats

This is an analysis of the grommet-controls jsx components that have 'stories'

Components usage summary

Components usage - how many times a component is being used from another component and which of their properties are used

Components usage

component	attributes	#stories	#used in
MaskedInput	updatedropIcondropContentonChangevaluemaskinputModepatternonKeyDownonKeyUpdisabledpipewidgets	15	5
DropInput	refvaluedefaultValueonInputtypewidgets	10	2
Tag	keyariaCheckeda11yTitlelabelrefonClickonChangeicon	12	1
PasswordInput		2	1
NumberInput		13	1
ImageStamp	srcround	2	1
EmailInput		1	1
DateInput		8	1
Colors	colorcolorsonSelectcolumnswrapsize	6	1
ColorInput		2	1
ScatterChart		4	0
RadarChart		3	0
PolarChart		2	0
PieChart		2	0
LineChart		17	0
HorizontalBarChart		2	0
DoughnutChart		2	0
BarChart		5	0
VerticalMenu		2	0
Value		6	0
TextInputField		3	0
TextAreaField		3	0
Tags		10	0
Spinning		4	0
Sidebar		4	0
SelectField		3	0
PasswordInputField		3	0
PagingTable		2	0
NumberInputField		3	0
Notification		12	0
MaskedInputField		3	0
IconButton		1	0
Header		3	0
Form		5	0
EmailInputField		3	0
DateInputField		3	0
ColorInputField		2	0
CheckBoxField		3	0
Card		8	0
Avatar		1	0

Attributes usage summary

Attributes usage - how many times an attribute is being set on a component, and on which component it is being set

Attributes usage

attribute	components	#used	#total used
onChange	MaskedInputTag	2	3
update	MaskedInput	1	3
inputMode	MaskedInput	1	2
mask	MaskedInput	1	2
dropContent	MaskedInput	1	2
widgets	DropInputMaskedInput	2	2
value	DropInputMaskedInput	2	2
ref	DropInputTag	2	2
icon	Tag	1	1
onClick	Tag	1	1
label	Tag	1	1
a11yTitle	Tag	1	1
ariaChecked	Tag	1	1
key	Tag	1	1
pipe	MaskedInput	1	1
disabled	MaskedInput	1	1
onKeyUp	MaskedInput	1	1
onKeyDown	MaskedInput	1	1
pattern	MaskedInput	1	1
dropIcon	MaskedInput	1	1
round	ImageStamp	1	1
src	ImageStamp	1	1
type	DropInput	1	1
onInput	DropInput	1	1
defaultValue	DropInput	1	1
size	Colors	1	1
wrap	Colors	1	1
columns	Colors	1	1
onSelect	Colors	1	1
colors	Colors	1	1
color	Colors	1	1

Components usage details

How many times a component is being used from another component, with a list of the components using it

MaskedInput

component	#used
NumberInput	1
MaskedInputField	1
EmailInput	1
DateInput	1
ColorInput	1

DropInput

component	#used
PasswordInput	1
MaskedInput	1

ColorInput

component	#used
ColorInputField	1

Colors

component	#used
ColorInput	1

DateInput

component	#used
DateInputField	1

EmailInput

component	#used
EmailInputField	1

ImageStamp

component	#used
Avatar	1

NumberInput

component	#used
NumberInputField	1

PasswordInput

component	#used
PasswordInputField	1

Tag

component	#used
Tags	1

Attributes usage details

How many times an attribute is being used on a component, with a list of those components

update

component	#used
MaskedInput	3

onChange

component	#used
MaskedInput	2
Tag	1

ref

component	#used
Tag	1
DropInput	1

value

component	#used
MaskedInput	1
DropInput	1

widgets

component	#used
MaskedInput	1
DropInput	1

dropContent

component	#used
MaskedInput	2

mask

component	#used
MaskedInput	2

inputMode

component	#used
MaskedInput	2

color

component	#used
Colors	1

colors

component	#used
Colors	1

onSelect

component	#used
Colors	1

columns

component	#used
Colors	1

wrap

component	#used
Colors	1

size

component	#used
Colors	1

defaultValue

component	#used
DropInput	1

onInput

component	#used
DropInput	1

type

component	#used
DropInput	1

src

component	#used
ImageStamp	1

round

component	#used
ImageStamp	1

dropIcon

component	#used
MaskedInput	1

pattern

component	#used
MaskedInput	1

onKeyDown

component	#used
MaskedInput	1

onKeyUp

component	#used
MaskedInput	1

disabled

component	#used
MaskedInput	1

pipe

component	#used
MaskedInput	1

key

component	#used
Tag	1

ariaChecked

component	#used
Tag	1

a11yTitle

component	#used
Tag	1

label

component	#used
Tag	1

onClick

component	#used
Tag	1

icon

component	#used
Tag	1

index

controls/Avatar

Docs