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

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