Quickstart: React

1 Create the project

npm create vite@latest css-hooks-playground -- --template react-ts
cd css-hooks-playground
npm install @css-hooks/react@next remeda

2 Define a hook

Create a module for styling utilities:

src/css.ts
import { createHooks } from "@css-hooks/react";

export const { on, styleSheet } = createHooks("&:active");

3 Render the generated stylesheet

Render styleSheet() once at the application root:

src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";
import { styleSheet } from "./css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <style dangerouslySetInnerHTML={{ __html: styleSheet() }} />
    <App />
  </StrictMode>,
);

4 Apply an override style

Use the registered &:active hook in a component:

src/App.tsx
import { pipe } from "remeda";

import { on } from "./css";

export default function App() {
  return (
    <button
      style={pipe(
        { transition: "transform 75ms" },
        on("&:active", { transform: "scale(0.9)" }),
      )}
    >
      Press me
    </button>
  );
}

Run npm run dev to try it. Continue to Configuration to define more hooks, then see Usage for composition patterns.