CSS Hooks

Bring advanced CSS capabilities to native inline styles, with practically z...

CSS in JSReactSolid
css-hooks/css-hookscss-hooks.com@css-hooks/core

README

css-hooks


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:

  1. ```jsx
  2. <a
  3.   href="https://css-hooks.com/"
  4.   style={hooks({
  5.     color: "#03f",
  6.     hover: {
  7.       color: "#09f",
  8.     },
  9.     active: {
  10.       color: "#e33",
  11.     },
  12.   })}
  13. >
  14.   Hooks
  15. </a>
  16. ```

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


- @css-hooks/react: React framework integration
- @css-hooks/solid: Solid framework integration
- @css-hooks/preact: Preact 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.