Matchbox 4.6.0

2020 November 16th


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

A hook that returns the prefers-reduced-motion OS level accessibility option

import { usePrefersReducedMotion } from '@sparkpost/matchbox';
const motion = usePrefersReducedMotion();
console.log(motion); // 'reduce' or 'no-preference'

A hook that detects if a DOM element is visible within the browsers viewport

import { useInView } from '@sparkpost/matchbox';
const [ref, inView] = useInView();
return <div ref={ref}>{inView ? 'In View' : 'Not In View'}</div>;

A new component that correctly styles inline code.

import { InlineCode } from '@sparkpost/matchbox';
return (
<p>
This is a regular paragraph with some <InlineCode>inline code</InlineCode>
</p>
);

LabelValue has been reworked to be composable

import { LabelValue } from '@sparkpost/matchbox';
return (
<LabelValue>
<LabelValue.Label>Label</LabelValue.Label>
<LabelValue.Value>Just a LabelValue</LabelValue.Value>
</LabelValue>
);

A TON of new icons have been added to matchbox-icons. This one is for the designers! See Material's documentation for more information.

  • All images have been replaced with cropped versions
  • Banner warning icon has been updated to differentiate from the error Banner
  • Empty State responsive behavior has been updated
  • Layout components now all accept a data-id prop
  • Modals now focus on its contained Panel when opening
  • ListBox does not break when option values are numbers
  • TextField prefix and suffix size calculation now uses ResizeObserver