Matchbox 4.2.0

2020 September 10th

For a full list of updates, view the release notes on Github.

The new Skeleton components are used as an alternative to the Spinner component to preview document structure while content is loading.

• Skeleton stories

<Skeleton.Header looksLike="h1" width="900" />
<Skeleton.Body lines={3} />
<Skeleton.Box borderRadius="circle" size="7rem" />

A new hook that taps into window.matchMedia and returns token breakpoint state.

const breakpoint = useBreakpoint();
// Possible `breakpoint` values:
// ['xl', 'lg', 'md', 'sm', 'xs', 'default'];
if (['default', 'xs', 'sm'].includes(breakpoint)) {
  // Do somthing!
}

Matchbox media now includes Webp, a compression image format developed by Google.

• View images

• Columns support className and display
• Motion tokens have been added to the ThemeProvider theme
• Popover reintroduces portalId