Hooks
useSystem
Custom hook that returns functionalities from admin-ui that adds different types of customization. Must be used under a <ThemeProvider>
context.
You can check some examples and detailed info about each of these functionalities in the sections below.
cn
Function that transforms a valid StyleObject into a className
. It is used to style native JSX elements and support integrations with other libraries while being consistent.
Example
Do's:
- ✅ Use it with native elements:
function Example() {
const { cn } = useSystem()
return (
<nav
className={cn({
bg: 'muted',
'button + button': { marginLeft: 2 },
})}
/>
)
}
- ✅ Use it with custom libraries that accepts a className:
function Example() {
const { cn } = useSystem()
return (
<Box
className={cn({
borderColor: 'muted',
':hover': {
borderColor: 'base',
},
})}
/>
)
}
Dont's:
- 🚫 Use it within Primitives:
// 🚫 Wrong
<Box
csx={cn({
bg: 'muted',
'button + button': { marginLeft: 2 },
})}
/>
// ✅ Correct
<Box
csx={{
bg: 'muted',
'button + button': { marginLeft: 2 },
}}
/>
- 🚫 Use it within SystemComponents:
// 🚫 Wrong
<Button
csx={cn({
bg: 'muted',
'button + button': { marginLeft: 2 },
})}
/>
// ✅ Correct
<Button
csx={{
bg: 'muted',
'button + button': { marginLeft: 2 },
}}
/>
cx
A function that combines two or more class names generated by the cn
function or even native ones.
Combining class names
useMediaQuery
This is a CSS media query hook for React. It listens for matches to a CSS media query. It allows the rendering of components based on whether the query matches or not.
import { useMediaQuery } from '@vtex/admin-ui'
Usage
Parameter
type | required | description |
---|---|---|
string, string[] | ✅ | A unique media query or an array of queries |
Return Value
The useMediaQuery
hook returns an array of booleans, indicating whether the given query matches or queries match.
type | description |
---|---|
boolean[] | An array of matches for each query passed |