Distribution

proportionally sized grid of boxes

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

string

"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.

string

"start"

"center"

"end"

"stretch"

"baseline"

basis

A fixed or relative size along its container's main axis.

string

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"xxlarge"

"full"

"1/2"

"1/3"

"2/3"

"1/4"

"2/4"

"3/4"

"auto"

"string"

children

Function that will be called when each value is rendered.

function

({ value: 60 }) => {}

fill

Whether the distribution expands to fill all of the available width and height.

boolean

true

false

gap

The amount of spacing between child elements.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"string"

gridArea

The name of the area to place this inside a parent Grid.

string

"a parent grid area name"

margin

The amount of margin around the component.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

values

Array of objects containing a value.

array

The array should already be sorted from largest to smallest value. The caller can put other properties in the object. The children function will be called to render the contents of each value.

[{ value: 60 }, { value: 40 }]

React/DOM Properties

At its core, the Distribution 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.