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.