Hooks


This hook returns active breakpoint status.

import { useBreakpoint } from '@sparkpost/matchbox';
function Component() {
const breakpoint = useBreakpoint();
if (['default', 'xs', 'sm'].includes(breakpoint)) {
// Do something!
}
}
breakpoint
string
Possible values:
"xl"
"lg"
"md"
"sm"
"xs"
"default"
Active breakpoint value

This hook copies a string to the clipboard and provides copied state.

import { useCopyToClipboard } from '@sparkpost/matchbox';
function Component() {
const { copy, copied } = useCopyToClipboard({ timeout: 2000 });
return (
<button onClick={() => copy('string')}>
{copied ? 'String has been copied' : 'Copy to clipboard'}
</button>;
);
}
copy
function
Copies the string passed as an argument to the clipboard
copied
bool
Copied state
timeout
number
default: 1000
How long the hook should wait after copying before resetting copied state

Hook that is built to be paired with the drawer component

import { Drawer, useDrawer } from '@sparkpost/matchbox';
function Example() {
const { getDrawerProps, getActivatorProps } = useDrawer();
return (
<div>
<button {...getActivatorProps()}>Open Drawer</button>
<Drawer {...getDrawerProps()} position="right">
<Drawer.Header>Header Title</Drawer.Header>
<Drawer.Content>Drawer Content</Drawer.Content>
<Drawer.Footer>Footer Content</Drawer.Footer>
</Drawer>
</div>
);
}
isOpen
bool
Open state
closeDrawer
function
Function to close the drawer
openDrawer
function
Function to open the drawer
toggleDrawer
function
Function to toggle the drawer's open state
getDrawerProps
function
Passes through open state, event handlers, a11y attributes
getActivatorProps
function
Passes through a11y attributes
id
string
default: matchbox-drawer
Required
Specifies a unique id
initialOpen
bool
Sets initial open states

Hook that is built to be paired with the modal component

import { Modal, useModal } from '@sparkpost/matchbox';
function Example() {
const { getModal, getActivatorProps } = useModal();
return (
<div>
<button {...getActivatorProps()}>Open Modal</button>
<Modal {...getModalProps()}>
<Modal.Header>Modal Title</Modal.Header>
<Modal.Content>Modal Content</Modal.Content>
<Modal.Footer>
<Button>Button</Button>
<Button>Button</Button>
<Button>Button</Button>
</Modal.Footer>
</Modal>
</div>
);
}
isOpen
bool
Open state
closeModal
function
Function to close the modal
openModal
function
Function to open the modal
toggleModal
function
Function to toggle the modal's open state
getModalProps
function
Passes through open state, event handlers, a11y attributes
getActivatorProps
function
Passes through a11y attributes
id
string
default: matchbox-modal
Required
Specifies a unique id
initialOpen
bool
Sets initial open states

Returns content rect dimensions for the provided DOM element

import { useResizeObserver } from '@sparkpost/matchbox';
function Example() {
const [ref, entry] = useResizeObserver();
console.log(entry.contentRect);
return <div ref={ref} />;
}
ref
React ref
Ref of the DOM element
contentRect
object
Content rect of the DOM element referenced

Hook that is built to be paired with the tabs component

import { Tabs, useTabs } from '@sparkpost/matchbox';
function Example() {
const { getTabsProps } = useTabs({
tabs: [
{
content: 'Tab 1'
},
{
content: 'Tab 2'
}
]
});
return <Tabs {...getTabProps()} />;
}
getTabsProps
function
Provides required tab props, onSelect, selected, and constructed tabs with onClick handlers
tabIndex
number
The selected tab index
tabs
array
The constructed tabs with onClick handlers
setTabIndex
function
Callback function to programatically set tab index
tabs
array
default: []
Required
Your tabs array
initialSelected
number
default: 0
Sets initial selected tab

SSR-friendly hook that handles global window events

import { useWindowEvent } from '@sparkpost/matchbox';
function Example() {
function handler() {
// do something!
}
useWindowEvent('resize', handler);
return 'example';
}
event
string
Required
Event type to listen to
callback
function
Required
Callback to run on the provided event