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"
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
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"
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: { fileInput: { browse: "string", dropPrompt: "string", dropPromptMultiple: "string", files: "string", remove: "string", removeAll: "string" }, form: { invalid: "string", required: "string" }, menu: { openMenu: "string", closeMenu: "string" }, rangeSelector: { lower: "string", upper: "string" }, select: { multiple: "string" }, skipLinks: { skipTo: "string" }, tabs: { tabContents: "string" }, textInput: { enterSelect: "string", suggestionsCount: "string", suggestionsExist: "string", suggestionIsOpen: "string" }, video: { closeMenu: "string", fullScreen: "string", progressMeter: "string", scrubber: "string", openMenu: "string", pauseButton: "string", playButton: "string", volumeDown: "string", volumeUp: "string" } } }
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. Currently, this is only supported for Layer.
object
{ box: { cssGap: true }, layer: { singleId: boolean } }
Whether or not Grommet should apply a global font-family, font-size, and line-height.
boolean
true
false
Dark vs. light theme variation. Default is unspecified and left to theme. Auto defaults to the system preferred theme mode.
string
"dark"
"light"
"auto"
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
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.