A lightweight React library to create CSS styles from style objects, with support for pseudo-classes, media queries and selectors.
import { useClassify } from "@9elt/classify";
export default function App() {
const className = useClassify({
width: 300,
height: 180,
":hover": {
height: 200,
},
"&>p": {
textTransform: "uppercase",
},
"@media (max-width: 300px)": {
width: 200,
},
});
return (
<div className={className}>
<p>my app</p>
</div>
)
}The html result
<head>
[...head content]
<style data-classify="f48e1bb" data-refs="1">
.classify-48oa7v {
width: 300px;
height: 180px;
}
.classify-48oa7v:hover {
height: 200px;
}
.classify-48oa7v>p {
text-transform: uppercase;
}
@media (max-width: 300px) {
.classify-48oa7v {
width: 200px;
}
}
</style>
</head>
<body>
<div id="root">
<div class="classify-48oa7v">
<p>my app</p>
</div>
</div>
</body>