Skip to main content

Common Props

We have a common set of props that are supported by a number of components. We present them below so its easier to understand the common features of the layout components.

SpaceProp​

export interface SpaceProp {
  space?: CSSLength,
}

space?: CSSLength controls space between children, concept covered in space principle

SizeProps​

export interface SizeProps {
  height?: CSSLength,
  minHeight?: CSSLength,
  maxHeight?: CSSLength,

  width?: CSSLength,
  minWidth?: CSSLength,
  maxWidth?: CSSLength,
}

The explicit size props (height,minHeight,maxHeight,width,minWidth,maxWidth) allow for explicit size control as covered in the scale principle section.

ScaleProp​

export interface ScaleProp {
  scale?: 'content' | 'stretch' | number;
}

The scale prop is covered in the scale principle section.

PaddingProp​

export interface PaddingProp {
  padding?: CSSBox,
}

Allows you to specifiy padding as a CSSBox. Using padding effectively is covered in the space principle section.

ScrollProp​

export type Scroll =
  | 'overflow'
  | 'both'
  | 'vertical'
  | 'horizontal'
  | 'hidden';

export interface ScrollProp {
  scroll?: Scroll;
}

The scroll props is covered in the scroll principle section.

DivProps​

export interface DivProps 
  extends React.HTMLProps<HTMLDivElement> {}

Gives you direct access to the underlying react tag for any customization you might want e.g. passing in a className or style etc.

BaseProps​

/**
 * Base Props common to all container components
 */
export interface BaseProps 
  extends ScrollProp, PaddingProp, SizeProps {}

A consistent set of customization options. Collects the following props into a common type: