Grommet

the top level grommet container

Props

background

Either a color identifier to use for the background color. For example: 'neutral-1'. Or, a 'url()' for an image. Dark is not needed if color is provided.

string

A color or image url.

"neutral-1"

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

object


{
  color: "neutral-1",
  dark: true,
  opacity: true,
  position: "bottom",
  repeat: "no-repeat",
  size: "cover",
  image: "url(//my.com/assets/img.png)",
  light: "string",
  clip: "text",
  rotate: 45
}

{ dark: "light-2", light: "dark-2" }

where opacity could be:

"weak"

"medium"

"strong"

true

where position could be:

any CSS for background-position

where repeat could be:

"no-repeat"

"repeat"

"string"

where size could be:

"cover"

"contain"

"string"

where clip could be:

"text"

"border-box"

"padding-box"

"content-box"

containerTarget

The node where Drop and Layer containers are inserted.

object

Defaults to document.body which is almost always the right choice. This is used for less common cases like rendering within an internal node (e.g. shadow root).

document.body

cssVars

Whether to expose the css variables.

boolean

true

false

dir

Layout direction for right to left contexts

string

"rtl"

full

Whether to take the whole viewport.

boolean

'true' should be used when the entire page layout will be controlled by a child Box or Grid, typically with a fixed header, footer, and/or sidebar, with scrolling being handled by the Main content within.

true

false

string

'min' indicates it should take at minimum the whole viewport, allowing the viewport to control scrolling. This should be used when the scrolling behavior includes all of the content on the page.

"min"

messages

Custom messages for grommet components. Use this property to define messages or a function to get localized messages for any grommet children components.

object

'format' is a function that will that will be called with an options object parameter containing the id of the message needed. This function should return the text string for that message. If this format function is not defined, messages will be used from the messages object below or a default message if the id wasn't defined in this object.


{
  format: function,
  messages: {
    button: {
      busy: "string",
      success: "string",
    },
    calendar: {
      previousMove: "string",
      previous: "string",
      nextMove: "string",
      next: "string"
    },
    carousel: {
      previous: "string",
      next: "string",
      jump: "string"
    },
    dateInput: {
      openCalendar: "string",
      enterCalendar: "string",
      exitCalendar: "string"
    },
    dataFilters: {
      clear: "string",
      heading: "string",
      open: "string",
      openSet: {
        singular: "string",
        plural: "string"
      }
    },
    dataForm: {
      submit: "string"
    },
    dataSearch: {
      label: "string",
      open: "string"
    },
    dataSort: {
      ascending: "string",
      by: "string",
      descending: "string",
      direction: "string",
      open: "string"
    },
    dataSummary: {
      filtered: "string",
      filteredSingle: "string",
      items: "string",
      itemsSingle: "string",
      selected: "string",
      total: "string",
      totalSingle: "string"
    },
    dataTableColumns: {
      open: "string",
      order: "string",
      select: "string",
      tip: "string"
    },
    dataTableGroupBy: {
      clear: "string",
      label: "string"
    },
    dataView: {
      label: "string"
    },
    fileInput: {
      browse: "string",
      dropPrompt: "string",
      dropPromptMultiple: "string",
      files: "string",
      remove: "string",
      removeAll: "string",
      maxFile: "string",
      maxSizeSingle: "string",
      maxSizeMultiple: {
        singular: "string",
        plural: "string",
      },
    },
    form: {
      invalid: "string",
      required: "string"
    },
    formField: {
      maxCharacters: {
        remaining: {
          singular: "string",
          plural: "string",
        },
        overLimit: {
          singular: "string",
          plural: "string",
        },
      }),
    }),
    input: {
      readOnlyCopy: {
        prompt: "string",
        validation: "string"
      }
    },
    menu: {
      openMenu: "string",
      closeMenu: "string"
    },
    rangeSelector: {
      lower: "string",
      upper: "string"
    },
    select: { 
      multiple: "string",
      selected: "string",
    },
    selectMultiple: {
      clearAll: "string",
      clearAllA11y: "string",
      open: "string",
      optionNotSelected: "string",
      optionSelected: "string",
      search: "string",
      selectAll: "string",
      selectAllA11y: "string",
      selectDrop: "string",
      selected: "string",
      selectedOfTotal: "string",
      selectedOptions: "string",
      showMore: "string",
      summarizedValue: "string",
    }
    skipLinks: { skipTo: "string" },
    tabs: { tabContents: "string" },
    textInput: {
      enterSelect: "string",
      suggestionsCount: "string",
      suggestionsExist: "string",
      suggestionIsOpen: "string"
    },
    video: {
      audioDescriptions: "string",
      captions: "string",
      closeMenu: "string",
      description: "string",
      fullScreen: "string",
      progressMeter: "string",
      scrubber: "string",
      openMenu: "string",
      pauseButton: "string",
      playButton: "string",
      volumeDown: "string",
      volumeUp: "string"
    }
  }
}

options

This prop was created to preserve backwards compatibility with existing behavior by allowing users to opt-in to newer behavior.

Box cssGap, lets users opt into using the css gap property for Box gap instead of inserting an extra node into the dom to simulate a gap.

Layer singleId provides a way to assign a unique id to a single DOM node.

Drop checkContainingBlock will enable additional checks to be performed on the target of the Drop to more accurately determine its position. This is helpful in situations where the target is within a containing block that has a transform, perspective or filter css property applied.

object


{
  box: { cssGap: true },
  layer: { singleId: boolean },
  drop: { checkContainingBlock: true } 
}

plain

Whether or not Grommet should apply a global font-family, font-size, and line-height.

boolean

true

false

theme

Custom styles for Grommet app component.

object


{
  global: {},
  anchor: {},
  ...
}

themeMode

Dark vs. light theme variation. Default is unspecified and left to theme. Auto defaults to the system preferred theme mode.

string

"dark"

"light"

"auto"

userAgent

User agent used to detect the device width for setting the initial breakpoint. Full list can be found at deviceatlas.com

string

"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.111 Safari/537.36

React/DOM Properties

At its core, the Grommet component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

grommet.extend

Any additional style for Grommet.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

global.font.face

Custom font face declaration.

string

"font"

object

(props) => {}