@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={hooks({
    color: "#03f",
    hover: {
      color: "#09f",
    },
    active: {
      color: "#e33",
    },
  })}
>
  Hooks
</a>

Notably, the hooks 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

• hooks.css: The style sheet that enables CSS Hooks
• @css-hooks/react: React framework integration
• @css-hooks/solid: Solid framework integration
• @css-hooks/preact: Preact framework integration
• @css-hooks/core: Core CSS Hooks package (internal use only)

Contributing

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

License

CSS Hooks is offered under the MIT license by Nick Saunders.