This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Developing

Version: 0.134.0

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

Loading...

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

Loading...

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

Loading...
Loading...

Parameter

typerequireddescription
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.

typedescription
boolean[]An array of matches for each query passed