cssier 0.1.5 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# cssier
|
|
1
|
+
# 🪅cssier
|
|
4
2
|
|
|
5
3
|
`cssier` is a React component library designed to simplify inline styling for pseudo-classes and pseudo-elements. With `cssier`, you can easily manage and apply custom styles for standard HTML and SVG elements, making your styling both dynamic and maintainable.
|
|
6
4
|
|
|
@@ -66,16 +64,13 @@ The `useStylesheet` hook returns an array where:
|
|
|
66
64
|
import { useStylesheet } from 'cssier/hooks'
|
|
67
65
|
|
|
68
66
|
const CustomComponent = (props) => {
|
|
69
|
-
const { pseudo, pseudoId: id, ...rest } = props
|
|
67
|
+
const { className, pseudo, pseudoId: id, ...rest } = props
|
|
70
68
|
const [pseudoId, css] = useStylesheet(pseudo, id)
|
|
71
69
|
|
|
72
70
|
return (
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
Styled with pseudo-classes and pseudo-elements!
|
|
77
|
-
</div>
|
|
78
|
-
</>
|
|
71
|
+
<div {...rest} className={`${className ?? ''} pseudoId`}>
|
|
72
|
+
Styled with pseudo-classes and pseudo-elements!
|
|
73
|
+
</div>
|
|
79
74
|
)
|
|
80
75
|
}
|
|
81
76
|
```
|