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 (
<Input
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. This is an emotion’s version of the popular classnames library. The key advantage of cx is that it detects emotion-generated class names ensuring styles are overwritten in the correct order.
Combining class names
Conditional class names
keyframes
Generates a unique animation-name that can be used to animate elements with CSS animations.
Example
useResponsiveValue
Custom hook which returns the value for the current breakpoint from the provided responsive values object. It also responds to the window resizing and returning the appropriate value for the new window size.
Usage
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 |