Skip to content

Commit 76bdb0f

Browse files
authored
Update README.md
Update Usage part
1 parent a74175c commit 76bdb0f

1 file changed

Lines changed: 46 additions & 9 deletions

File tree

README.md

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -35,34 +35,71 @@ yarn add react-style-stringify
3535
3636
## Usage
3737

38-
Here’s a basic example of how to use the package:
38+
### Import utils
3939

4040
```tsx
4141
import {
4242
stringifyCSSProperties,
4343
stringifyStyleMap,
4444
} from "react-style-stringify";
45+
```
46+
47+
### Convert a single `CSSProperties` object
4548

46-
// Convert a single CSSProperties object
49+
```tsx
4750
const cssString = stringifyCSSProperties({
4851
flex: 1,
4952
padding: 20,
5053
backgroundColor: "teal",
5154
});
5255
// Output: "flex:1; padding:20px; background-color:teal;"
56+
```
57+
58+
**Inject `!important` into CSS string**
59+
60+
```tsx
61+
const importantCssString = stringifyCSSProperties(
62+
{
63+
flex: 1,
64+
padding: 20,
65+
backgroundColor: "teal",
66+
},
67+
true
68+
);
69+
// Output: "flex:1!important; padding:20px!important; background-color:teal!important;"
70+
```
71+
72+
### Convert a `Record<string, CSSProperties>` object
5373

54-
// Convert a Record<string, CSSProperties> object
74+
```tsx
5575
const cssMapString = stringifyStyleMap({
56-
div: {
57-
color: "blue",
58-
marginBottom: 20,
76+
p: {
77+
margin: 0,
78+
color: "teal",
5979
},
60-
".my-class": {
80+
"#root ul.my-list > li": {
6181
padding: 10,
62-
fontSize: 14,
6382
},
6483
});
65-
// Output: "div{color:blue; margin-bottom:20px;} .my-class{padding:10px; font-size:14px;}"
84+
// Output: "p{margin:0; color:teal;} #root ul.my-list > li{padding:10px;}"
85+
```
86+
87+
**Inject `!important` into CSS string**
88+
89+
```tsx
90+
const importantCssMapString = stringifyStyleMap(
91+
{
92+
p: {
93+
margin: 0,
94+
color: "teal",
95+
},
96+
"#root ul.my-list > li": {
97+
padding: 10,
98+
},
99+
},
100+
true
101+
);
102+
// Output: "p{margin:0!important; color:teal!important;} #root ul.my-list > li{padding:10px!important;}"
66103
```
67104

68105
## API

0 commit comments

Comments
 (0)