@css-hooks/react

Overview

Hooks bring CSS features to native inline styles, enabling you to target various states such as hover, focus, and active, all without leaving the style prop. For example, hooks can easily solve the common use case of applying state-driven styles to a link:

<a
  href="https://css-hooks.com/"
  style={css({
    color: "#03f",
    fontSize: "1rem",
    "&:hover": {
      color: "#09f",
    },
    "&:active": {
      color: "#e33",
    },
    "@media (1000px <= width)": {
      fontSize: "1.25rem",
    },
  })}
>
  Hooks
</a>

Notably, the css function is pure. It simply returns a flat style object that is compatible with the style prop, creating dynamic property values that change under various conditions through CSS variables.

Documentation

Please visit css-hooks.com to get started.

Packages

• @css-hooks/recommended: Recommended hook configuration with sensible defaults
• @css-hooks/react: React framework integration
• @css-hooks/preact: Preact framework integration
• @css-hooks/solid: Solid framework integration
• @css-hooks/qwik: Qwik framework integration
• @css-hooks/core: Core package (internal / advanced use cases)

Contributing

Contributions are welcome. Please see the contributing guidelines for more information.

License

CSS Hooks is offered under the MIT license.