Skip to content

Commit 7efd6d0

Browse files
committed
Docs.
1 parent 031528f commit 7efd6d0

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@
55

66
Seamless mapping of class names to CSS modules inside of React components.
77

8+
- [What's the Problem?](#whats-the-problem)
9+
- [Usage](#usage)
10+
- [Options](#options)
11+
- [`allowMultiple`](#allowmultiple)
12+
- [`keepOriginal`](#keeporiginal)
13+
- [`errorNotFound`](#errornotfound)
14+
- [SASS, SCSS, LESS and other CSS Preprocessors](#sass-scss-less-and-other-css-preprocessors)
15+
- [Multiple CSS Classes](#multiple-css-classes)
16+
817
## What's the Problem?
918

1019
[CSS modules](https://github.com/css-modules/css-modules) are awesome. If you are not familiar with CSS modules, it is a concept of using a module bundler such as [webpack](http://webpack.github.io/docs/) to load CSS scoped to a particular document. CSS modules loader will generate a unique name for a each CSS class at the time of loading the CSS. Refer to [webpack-demo](https://css-modules.github.io/webpack-demo/) for a full example.
@@ -111,6 +120,38 @@ Thats it!
111120

112121
### Options
113122

123+
Options are supplied as the third parameter to the `CSSModules` function.
124+
125+
```js
126+
CSSModules(Component, styles, options);
127+
```
128+
129+
#### `allowMultiple`
130+
131+
Allows multiple CSS class names. Default: `true`.
132+
133+
When `false`, the following will cause an error:
134+
135+
```js
136+
<div className='foo bar' />
137+
```
138+
139+
#### `keepOriginal`
140+
141+
Keeps original CSS class name in addition to names of the CSS Modules. Default: `true`.
142+
143+
When `true`, the following `ReactElement`:
144+
145+
```js
146+
<div className='foo bar' />
147+
```
148+
149+
will be rendered with a `className` property "foo foo-unique-css-module reference bar bar-unique-css-module-reference".
150+
151+
#### `errorNotFound`
152+
153+
Throws an error when class name cannot be mapped to a CSS Module. Default: `false`.
154+
114155
## SASS, SCSS, LESS and other CSS Preprocessors
115156

116157
[ICSS](https://github.com/css-modules/icss) is compatible with the CSS Preprocessors. All you need is to add the preprocessor to the chain of loaders, e.g. in the case of webpack it is as simple as installing `sass-loader` and adding `!sass` to the end of the `style-loader` loader chain declaration (loaders are processed from right to left):

0 commit comments

Comments
 (0)