Grommet

https://v2.grommet.io
Admin
Grommet is a React-based UI framework and component library designed to help developers build...
Tokens:198,651
Snippets:2,690
Trust Score:8.9
Update:6 days ago
Show doc for...
Tokens:
Raw
### full min example

Source: https://v2.grommet.io/grommet

Example value for the full prop.

```text
"min"
```

--------------------------------

### dir rtl example

Source: https://v2.grommet.io/grommet

Example value for the dir prop.

```text
"rtl"
```

--------------------------------

### video.icons.configure theme example

Source: https://v2.grommet.io/video

Example icon for the video.icons.configure theme property.

```jsx
<Actions />
```

--------------------------------

### clock.analog.size.xsmall example

Source: https://v2.grommet.io/clock

Example value for the clock.analog.size.xsmall theme property.

```css
"48px"
```

--------------------------------

### video.captions.background theme example

Source: https://v2.grommet.io/video

Example value for the video.captions.background theme property.

```text
"rgba(0, 0, 0, 0.7)"
```

--------------------------------

### video.icons.fullScreen theme example

Source: https://v2.grommet.io/video

Example icon for the video.icons.fullScreen theme property.

```jsx
<Expand />
```

--------------------------------

### video.icons.volume theme example

Source: https://v2.grommet.io/video

Example icon for the video.icons.volume theme property.

```jsx
<Volume />
```

--------------------------------

### clock.analog.size.xxlarge example

Source: https://v2.grommet.io/clock

Example value for the clock.analog.size.xxlarge theme property.

```css
"288px"
```

--------------------------------

### video.icons.play theme example

Source: https://v2.grommet.io/video

Example icon for the video.icons.play theme property.

```jsx
<Play />
```

--------------------------------

### clock.analog.size.xlarge example

Source: https://v2.grommet.io/clock

Example value for the clock.analog.size.xlarge theme property.

```css
"216px"
```

--------------------------------

### video.icons.reduceVolume theme example

Source: https://v2.grommet.io/video

Example icon for the video.icons.reduceVolume theme property.

```jsx
<VolumeLow />
```

--------------------------------

### max prop examples

Source: https://v2.grommet.io/meter

Examples for the max prop, both number and string.

```text
25
```

```text
"25"
```

--------------------------------

### clock.analog.minute.size example

Source: https://v2.grommet.io/clock

Example value for the clock.analog.minute.size theme property.

```css
"12px"
```

--------------------------------

### clock.analog.size.small example

Source: https://v2.grommet.io/clock

Example value for the clock.analog.size.small theme property.

```css
"72px"
```

--------------------------------

### areas prop example (array of objects)

Source: https://v2.grommet.io/grid

Example of the areas prop as an array of objects with name, start, and end coordinates.

```javascript
[
  {
    name: "header",
    start: [0, 0],
    end: [0, 2]
  }
]
```

--------------------------------

### help prop string example

Source: https://v2.grommet.io/formfield

Example string value for the help prop. Displays help text describing how the field works.

```string
"Text to help the user know what is possible"
```

--------------------------------

### activeDate prop examples

Source: https://v2.grommet.io/calendar

Possible values for the activeDate prop: 'start' or 'end'.

```text
"start"
```

```text
"end"
```

--------------------------------

### textAlign prop examples

Source: https://v2.grommet.io/paragraph

Possible values for the textAlign prop: start, center, end, justify.

```string
"start"
```

```string
"center"
```

```string
"end"
```

```string
"justify"
```

--------------------------------

### show prop example

Source: https://v2.grommet.io/cards

Example value for the show prop, ensuring the item at this index is visible initially.

```number
10
```

--------------------------------

### DataChart Component

Source: https://v2.grommet.io/datachart

The DataChart component takes an array of objects in `data` and provides various visualization capabilities on that data. It attempts to default as much as it possibly can to make it easy to get started and then customize later.

```APIDOC
## DataChart Component

### Description
The DataChart component takes an array of objects in `data` and provides various visualization capabilities on that data. It attempts to default as much as it possibly can to make it easy to get started and then customize later.

### Props

#### a11yTitle
Custom label to be used by screen readers. When provided, an aria-label will be added to the element.
- **Type**: `string`
- **Example**: `"a user friendly label for screen readers"`

#### alignSelf
How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.
- **Type**: `string`
- **Values**: `"start"`, `"center"`, `"end"`, `"stretch"`, `"baseline"`

#### axis
Whether to show an axis and how it should look.
- **Type**: `boolean` | `string` | `object`
- **Description**: If axis is true, DataChart will look for a property called 'date' or 'time' and automatically use that for the x-axis. DataChart will use the first property in 'series' for the y-axis. If 'x' or 'y' is a string, it indicates the property to use to determine the values to show. If 'x' is true, DataChart will look for a property called 'date' or 'time' and automatically use that for the x-axis. 'granularity' indicates how many values to show. If DataChart can't find a property to use, it will use the data index for the x-axis. If axis or 'y' is true, DataChart will use the first property in 'series'. 'coarse' granularity shows two values, one at each end. 'fine' granularity shows all x-axis values and 5 y-axis values. 'medium' granularity picks something in between.
- **Values**: `true`, `false`, `"date"`, or an object with `x` and `y` properties.
- **Object structure**:
```
{
  x: boolean | string | { granularity: "...", property: "date" },
  y: boolean | string | { granularity: "...", "property": "amount" }
}
```
- **Granularity values**: `"coarse"`, `"medium"`, `"fine"`

#### bounds
When set to 'align', indicates that the bounds of all series should be aligned. When not set, the bounds of each series property are based solely on the data found for that property.
- **Type**: `string` | `object`
- **Values**: `"align"` or an object with `x` and `y` arrays.
- **Object structure**:
```
{
  x: [0, 100],
  y: [0, 100],
}
```

#### chart
How to visualize the data.
- **Type**: `string` | `object`
- **Description**: If only a string is specified, that is the property to use and all other aspects are defaulted. 'property' indicates which property of the data objects to use. When 'type' is 'bars' or 'areas', 'property' is an array of strings or objects. If 'property' is an object, it specifies a map of properties to graphic aspects: x, y, color, thickness. If 'transform' is specified, it will be used to transform the data value before using it. For example, to convert a data value to a hex color string for the color.
- **String example**: `"property"`
- **Object structure**:
```
{
  property: "...",
  color: "...",
  dash: boolean,
  opacity: "...",
  pattern: "...",
  point: "...",
  round: boolean,
  thickness: "...",
  type: "..."
}
```
- **Property values**: `"string"`, `array["property1", "property2"]`, `array[{ property: "...", color: "..." }]`, `{ color: "string" | { property: "...", transform: function }, thickness: "...", x: "string", y: "string" }`
- **Color values**: `"string"`, `{ dark: "string", light: "string" }`
- **Opacity values**: `"weak"`, `"medium"`, `"strong"`, `number`, `boolean`
- **Pattern values**: `"squares"`, `"circles"`, `"stripesHorizontal"`, `"stripesVertical"`, `"stripesDiagonalDown"`, `"stripesDiagonalUp"`
- **Point values**: `"circle"`, `"diamond"`, `"square"`, `"star"`, `"triangle"`, `"triangleDown"`
- **Thickness values**: `"hair"`, `"xsmall"`, `"small"`, `"medium"`, `"large"`, `"xlarge"`, `"none"`, `"string"`
- **Type values**: `"bar"`, `"bars"`, `"line"`, `"area"`, `"areas"`, `"point"`

#### data
The data set.
- **Type**: `array`
- **Example**:
```
[
  {
    "date": "2020-05-28",
    "amount": 88,
    "percent": 20
  },
  {
    "date": "2020-05-27",
    "amount": 77,
    "percent": 15
  }
]
```

### Usage
To begin with, give your DataChart some data and set the `series` property to indicate which properties in the data objects should be used. Note that the X and Y axis are defaulted and the dates are automatically formatted based on the granularity given. Next, we can customize the kind of chart we are looking at. Next, we can customize the axis and add guide lines.
```

--------------------------------

### toggleGroup.kind example

Source: https://v2.grommet.io/togglegroup

Example value for toggleGroup.kind theme option.

```javascript
'toolbar'
```

--------------------------------

### toggleGroup.divider.color example

Source: https://v2.grommet.io/togglegroup

Example value for toggleGroup.divider.color theme option.

```javascript
border
```

--------------------------------

### toggleGroup.container example

Source: https://v2.grommet.io/togglegroup

Example object for toggleGroup.container theme option.

```javascript
{
  round: 'xsmall', 
  border: true,
}
```

--------------------------------

### step prop example

Source: https://v2.grommet.io/cards

Example value for the step prop, determining how many items to render at a time.

```number
50
```

--------------------------------

### paragraph.textAlign example

Source: https://v2.grommet.io/paragraph

Example value for the textAlign theme property.

```string
"start"
```

--------------------------------

### toolbar prop string examples

Source: https://v2.grommet.io/data

Example string values for the 'toolbar' prop, indicating which components to include.

```javascript
"search"
```

```javascript
"filters"
```

```javascript
"view"
```

--------------------------------

### min prop string example

Source: https://v2.grommet.io/rangeinput

Example value for the min prop as a string.

```string
"1"
```

--------------------------------

### defaultValue string example

Source: https://v2.grommet.io/select

String example for the defaultValue prop, which sets the initially selected value.

```string
"value1"
```

--------------------------------

### justify prop examples

Source: https://v2.grommet.io/grid

Example values for the justify prop.

```javascript
"start"
```

```javascript
"center"
```

```javascript
"end"
```

```javascript
"stretch"
```

--------------------------------

### play prop example

Source: https://v2.grommet.io/carousel

Example value for the play prop, setting the autoplay interval in milliseconds.

```javascript
1500
```

--------------------------------

### href prop example

Source: https://v2.grommet.io/anchor

Example value for the href prop.

```javascript
"//my.com/path"
```

--------------------------------

### clock.digital.text.xxlarge.height example

Source: https://v2.grommet.io/clock

Example value for the clock.digital.text.xxlarge.height theme property.

```javascript
1.125
```

--------------------------------

### as prop examples

Source: https://v2.grommet.io/box

Example values for the as prop, which can be a string, function, or element.

```text
"div"
```

```javascript
() => {}
```

```jsx
<span />
```

--------------------------------

### clock.digital.text.xxlarge.size example

Source: https://v2.grommet.io/clock

Example value for the clock.digital.text.xxlarge.size theme property.

```css
"34px"
```

--------------------------------

### clock.digital.text.xlarge.height example

Source: https://v2.grommet.io/clock

Example value for the clock.digital.text.xlarge.height theme property.

```javascript
1.1875
```

--------------------------------

### step prop example

Source: https://v2.grommet.io/rangeinput

Example value for the step prop, specifying the step interval between values.

```string
"2"
```

--------------------------------

### clock.digital.text.xlarge.size example

Source: https://v2.grommet.io/clock

Example value for the clock.digital.text.xlarge.size theme property.

```css
"26px"
```

--------------------------------

### timeInput.drop.option.pad theme example

Source: https://v2.grommet.io/timeinput

Example value for the timeInput.drop.option.pad theme property, which sets the padding around each time option.

```text
{ vertical: "xxsmall", horizontal: "xsmall" }
```

--------------------------------

### clock.digital.text.large.height example

Source: https://v2.grommet.io/clock

Example value for the clock.digital.text.large.height theme property.

```javascript
1.167
```

--------------------------------

### clock.digital.text.large.size example

Source: https://v2.grommet.io/clock

Example value for the clock.digital.text.large.size theme property.

```css
"22px"
```

--------------------------------

### clock.digital.text.medium.height example

Source: https://v2.grommet.io/clock

Example value for the clock.digital.text.medium.height theme property.

```javascript
1.375
```

--------------------------------

### clock.digital.text.medium.size example

Source: https://v2.grommet.io/clock

Example value for the clock.digital.text.medium.size theme property.

```css
"18px"
```

--------------------------------

### avatar.size theme examples

Source: https://v2.grommet.io/avatar

Example values for avatar.size theme properties for each size.

```text
"18px"
```

```text
"24px"
```

```text
"48px"
```

```text
"72px"
```

```text
"96px"
```

```text
"120px"
```

```text
"144px"
```

```text
"168px"
```

```text
"192px"
```

--------------------------------

### clock.digital.text.small.height example

Source: https://v2.grommet.io/clock

Example value for the clock.digital.text.small.height theme property.

```javascript
1.43
```

--------------------------------

### Theme: dateTimeInput.drop.pad examples

Source: https://v2.grommet.io/datetimeinput

Example values for the dateTimeInput.drop.pad theme property, which sets the padding inside the drop container.

```text
"small"
```

```text
{ vertical: "small", horizontal: "small" }
```

--------------------------------

### clock.digital.text.small.size example

Source: https://v2.grommet.io/clock

Example value for the clock.digital.text.small.size theme property.

```css
"14px"
```

--------------------------------

### clock.digital.text.xsmall.height example

Source: https://v2.grommet.io/clock

Example value for the clock.digital.text.xsmall.height theme property.

```javascript
1.5
```

--------------------------------

### label prop string example

Source: https://v2.grommet.io/menu

Example string label for the menu control.

```text
"Actions"
```

--------------------------------

### background size examples

Source: https://v2.grommet.io/box

Example values for the size property of the background object.

```text
"cover"
```

```text
"contain"
```

```text
"string"
```

--------------------------------

### background prop string examples

Source: https://v2.grommet.io/box

Example string values for the background prop, including a color identifier and an image URL.

```text
"neutral-1"
```

```text
"url(//my.com/assets/img.png)"
```

--------------------------------

### background prop examples

Source: https://v2.grommet.io/meter

Examples for the background prop, including string and object forms.

```text
"light-2"
```

```text
{ color: "light-2", opacity: "medium" }
```

--------------------------------

### clock.analog.size.large example

Source: https://v2.grommet.io/clock

Example value for the clock.analog.size.large theme property.

```css
"144px"
```

--------------------------------

### clock.analog.size.medium example

Source: https://v2.grommet.io/clock

Example value for the clock.analog.size.medium theme property.

```css
"96px"
```
Tokens:
Raw