Configuration
Set up your hooks using the createHooks
function introduced in the
Setup guide. This function allows you to define various hooks that
can be used throughout your application.
Basic hook setup
To set up your hooks, use the createHooks
function as follows:
// src/css.ts
import { createHooks } from "@css-hooks/react";
export const { on, and, or, not, styleSheet } = createHooks(
"@media (hover: hover)",
"@container (min-width: 320px)",
"@supports (height: 100dvh)",
"&:hover",
// Add more hooks as needed.
);
Selector syntax
Hooks are defined using a selector syntax based on CSS rulesets. There are two types:
Element selectors
Use &
as a placeholder for the element to which the condition applies. The &
character must appear somewhere in the selector, e.g.
"&:hover"
At-rule selectors
At-rule selectors start with @media
, @container
, or @supports
, followed by
a space, e.g.
"@media (min-width: 600px)"
Reusable conditions
If you find yourself using specific combinations of hooks frequently, you can
create reusable conditions using the and
, or
, and not
functions and export
them from your css.ts
module:
// src/css.ts
// Combining hooks for reusable conditions
export const hoverOnly = and("@media (hover: hover)", "&:hover");
Using the hooks
Now that you know how to define hooks, complete the Setup guide if you haven't already, or proceed to the Usage guide to learn how to use your hooks.