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

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

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