Skip to content

Commit e619634

Browse files
committed
Docs.
1 parent fae35f8 commit e619634

File tree

1 file changed

+11
-11
lines changed

1 file changed

+11
-11
lines changed

README.md

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ However, this approach has several disadvantages:
5959
* Mixing CSS Modules and global CSS classes is cumbersome.
6060
* Reference to an undefined CSS Module resolves to `undefined` without a warning.
6161

62-
React CSS Modules component automates loading of CSS Modules using `localClassName` property, e.g.
62+
React CSS Modules component automates loading of CSS Modules using `styleName` property, e.g.
6363

6464
```js
6565
import React from 'react';
@@ -68,9 +68,9 @@ import CSSModules from 'react-css-modules';
6868

6969
class Car extends React.Component {
7070
render () {
71-
return <div localClassName='car'>
72-
<div localClassName='front-door'></div>
73-
<div localClassName='back-door'></div>
71+
return <div styleName='car'>
72+
<div styleName='front-door'></div>
73+
<div styleName='back-door'></div>
7474
</div>;
7575
}
7676
}
@@ -85,15 +85,15 @@ Using `react-css-modules`:
8585
* There is clear distinction between global CSS and CSS Modules, e.g.
8686

8787
```js
88-
<div className='global-css' localClassName='local-module'></div>
88+
<div className='global-css' styleName='local-module'></div>
8989
```
9090

91-
* You are warned when `localClassName` refers to an undefined CSS Module ([`errorWhenNotFound`](#errorwhennotfound) option).
91+
* You are warned when `styleName` refers to an undefined CSS Module ([`errorWhenNotFound`](#errorwhennotfound) option).
9292
* You can enforce use of a single CSS module per `ReactElement` ([`allowMultiple`](#allowmultiple) option).
9393

9494
## The Implementation
9595

96-
`react-css-modules` extends `render` method of the target component. It will use the value of `localClassName` to look for CSS Modules in the associated styles object and will append the matching unique CSS class names to the `ReactElement` `className` property value.
96+
`react-css-modules` extends `render` method of the target component. It will use the value of `styleName` to look for CSS Modules in the associated styles object and will append the matching unique CSS class names to the `ReactElement` `className` property value.
9797

9898
[Awesome!](https://twitter.com/intent/retweet?tweet_id=636497036603428864)
9999

@@ -217,14 +217,14 @@ Allows multiple CSS Module names.
217217
When `false`, the following will cause an error:
218218

219219
```js
220-
<div localClassName='foo bar' />
220+
<div styleName='foo bar' />
221221
```
222222

223223
#### `errorWhenNotFound`
224224

225225
Default: `true`.
226226

227-
Throws an error when `localClassName` cannot be mapped to an existing CSS Module.
227+
Throws an error when `styleName` cannot be mapped to an existing CSS Module.
228228

229229
## SASS, SCSS, LESS and other CSS Preprocessors
230230

@@ -275,7 +275,7 @@ Composition promotes better separation of markup and style using semantics that
275275

276276
To learn more about composing CSS rules, I suggest reading Glen Maddern article about [CSS Modules](http://glenmaddern.com/articles/css-modules) and the official [spec of the CSS Modules](https://github.com/css-modules/css-modules).
277277

278-
That said, if you enable [`allowMultiple`](#allowmultiple) option, you can map multiple CSS Modules to a single `ReactElement`. `react-css-modules` will append a unique class name for every CSS Module it matches in the `localClassName` declaration, e.g.
278+
That said, if you enable [`allowMultiple`](#allowmultiple) option, you can map multiple CSS Modules to a single `ReactElement`. `react-css-modules` will append a unique class name for every CSS Module it matches in the `styleName` declaration, e.g.
279279

280280
```css
281281
.button {
@@ -288,7 +288,7 @@ That said, if you enable [`allowMultiple`](#allowmultiple) option, you can map m
288288
```
289289

290290
```js
291-
<div localClassName='button active'></div>
291+
<div styleName='button active'></div>
292292
```
293293

294294
This will map both [Interoperable CSS](https://github.com/css-modules/icss) CSS classes to the target element.

0 commit comments

Comments
 (0)