Skip to content

Commit dd8cc67

Browse files
authored
Update APIs in README
1 parent b2a7631 commit dd8cc67

File tree

1 file changed

+52
-11
lines changed

1 file changed

+52
-11
lines changed

README.md

+52-11
Original file line numberDiff line numberDiff line change
@@ -99,32 +99,53 @@ class ComponentName extends React.Component {
9999
// ComponentName.displayName = 'ComponentName';
100100
```
101101

102+
Please, note also that if you are using a functional stateless component, you have to wrap it with our function to make it work.
103+
This function accepts the component as parameter of the first function and its name as parameter of its return:
104+
105+
```js
106+
import ReactCSSOM from 'react-cssom';
107+
108+
const Foo = ReactCSSOM.inject((props) => (
109+
<div>
110+
Hello {props.name}
111+
</div>
112+
))('Foo');
113+
```
114+
102115

103116
### Adapting based on props
104117

105-
If you want to set styles based on props, you can do it in 2 ways:
118+
If you want to set styles based on props, you can do it in 3 ways:
106119

107-
- Set inline styles, as we can see in this example:
120+
- Using a style tag directly into the component:
108121
```js
109-
class Button extends React.Component {
122+
export default class Button extends React.Component {
110123

111124
static displayName = 'Button';
112125

113126
render() {
114127
return (
115-
<button
116-
style={{
117-
backgroundColor: this.props.primary ? 'blue' : 'black',
118-
}}
119-
>
120-
Click me
121-
</button>
128+
<div>
129+
<style>
130+
{`
131+
.⚛Button > button {
132+
background-color: ${this.props.primary ? 'blue' : 'black'}
133+
}
134+
`}
135+
</style>
136+
<button
137+
className={this.props.primary ? styles.primary : styles.default}
138+
>
139+
Click me
140+
</button>
141+
</div>
122142
)
123143
}
124144
}
125145
```
126146

127-
- Set a specific class, maybe using css-modules, as we can see here:
147+
148+
- Setting a specific class, maybe using css-modules, as we can see here:
128149
```js
129150
import styles from './Button.css';
130151

@@ -169,6 +190,26 @@ and here is the corresponding css, note the global selector:
169190
}
170191
```
171192

193+
- Setting inline styles, as we can see in this example:
194+
```js
195+
class Button extends React.Component {
196+
197+
static displayName = 'Button';
198+
199+
render() {
200+
return (
201+
<button
202+
style={{
203+
backgroundColor: this.props.primary ? 'blue' : 'black',
204+
}}
205+
>
206+
Click me
207+
</button>
208+
)
209+
}
210+
}
211+
```
212+
172213
## Change Log
173214

174215
This project adheres to [Semantic Versioning](http://semver.org/).

0 commit comments

Comments
 (0)