A pack of extensions for grommet 2
created:7/7/2021
updated:7/7/2021
loc
181
comments
3%
passed
10
failed
10
coverage
20%

Tags

avatar of atanasster
grommet-controls
3.0.2

A list of tags that can be removed.

import { Tags } from 'grommet-controls';

On Click

Name
Description
Default
ITagsProps(8 properties)
children

Function that will be called when each option is rendered

((tags: TagValueType[], index: number, value: TagValueType) => ReactNode) & ReactNode
-
focusable

Whether the tag list is focusable

boolean
true
icon

Icon element to remove a tag

ReactNode
<FormClose />
tagProps
Tag elements
<Box />
and
<Text />
properties
ITagOwnProps & BoxProps & Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onChange">
-
onChange

Function that will be called when the user removes a tag

(event: { option: TagValueType[]; value: TagValueType; target: Element | Text; }) => void
-
onClick

Function that will be called when the user clicks on a tag

((event: MouseEvent<HTMLDivElement, MouseEvent>, value: TagValueType) => void) & ((...args: any[]) => any)
-
placeholder

Placeholder text to use when no value is provided

string
-
value

List of tag items to display

TagValueType
[]
BoxProps(27 properties)

Commits

Date
Author
Commit Message
8/31/2020

atanasster

avatar of atanasster
update stories titles and navigation
8/27/2019

atanasster

avatar of atanasster
initial commit 2.x alpha
2 commits
package
imports
peer
grommet
^2.15.0
TextKeyboardBoxPropsBox
*
FormClose
*
react
^17.0.1
ReactRefObjectComponent
*
react-dom
^17.0.1
findDOMNode
*
file
imports
"../Tag"
Tag
"./TagsProps"
ITagsProps

Stories

Main

A 11 Y Title

Children

Icon

Direction

Tag Props

Focusable

Placeholder

Value