A pack of extensions for grommet 2
created:4/8/2021
updated:4/8/2021
source lines:181
comments %:3

Tags

grommet-controls
3.0.1

A list of tags that can be removed.

import { Tags } from 'grommet-controls';

Main

Name
Description
Default
ITagsProps (8 properties)
children

Function that will be called when each option is rendered

((tags: TagValueType[], index: number, value: TagValueType) => ReactNode) | (((tags: TagValueType[], index: number, value: TagValueType) => ReactNode) & string) | ... 5 more ... | (((tags: TagValueType[], index: number, value: TagValueType) => ReactNode) & ReactPortal)
-
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

ITagProps
-
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

update stories titles and navigation
8/27/2019

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

A 11 Y Title

Children

Icon

Direction

Tag Props

On Click

Focusable

Placeholder

Value