Common Types

First lets look at some common types used in the props.

CSSLength

type CSSLength = number | string

Examples:

• 5 (implies 5px)
• 5px (explicit 5px)
• 5rem (explicit 5rem 😊)

CSSBox

Various versions of providing common shorthand properties.

export type CSSBox =
  /** top,right,left,bottom */
  | CSSLength
  /** [top & bottom, left & right] */
  | [CSSLength, CSSLength]
  /** [top,right,bottom,left] */
  | [CSSLength, CSSLength, CSSLength, CSSLength]
  /** Individual */
  | { top?: CSSLength, right?: CSSLength, bottom?: CSSLength, left?: CSSLength }

e.g.

• 5 (means 5px top, right, left, bottom).
• ['5rem', '10px'] (means 5rem top, bottom and 10px left, right).
• [10, 5, '10rem', 15] (means 10px top, 5px right, 10rem bottom, 15px left).
• {right: 5} (means 5px right).