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.
Please visit css-hooks.com to get started.
- @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)
Contributions are welcome. Please see the contributing guidelines for more information.
CSS Hooks is offered under the MIT license.