1 | # React CSS components
|
2 |
|
3 | [![Travis build status](https://img.shields.io/travis/andreypopp/react-css-components/master.svg)](https://travis-ci.org/andreypopp/react-css-components)
|
4 | [![npm](https://img.shields.io/npm/v/react-css-components.svg)](https://www.npmjs.com/package/react-css-components)
|
5 |
|
6 | ## Motivation
|
7 |
|
8 | Define React presentational components with CSS.
|
9 |
|
10 | The implementation is based on [CSS modules][]. In fact React CSS Components is
|
11 | just a thin API on top of CSS modules.
|
12 |
|
13 | ## Installation & Usage
|
14 |
|
15 | Install from npm:
|
16 |
|
17 | % npm install react-css-components
|
18 |
|
19 | Configure in `webpack.config.js`:
|
20 |
|
21 | module.exports = {
|
22 | ...
|
23 | module: {
|
24 | loaders: [
|
25 | {
|
26 | test: /\.react.css$/,
|
27 | loader: 'babel-loader!react-css-components/webpack',
|
28 | }
|
29 | ]
|
30 | }
|
31 | ...
|
32 | }
|
33 |
|
34 | Now you can author React components in `Styles.react.css`:
|
35 |
|
36 | Label {
|
37 | color: red;
|
38 | }
|
39 |
|
40 | Label:hover {
|
41 | color: white;
|
42 | }
|
43 |
|
44 | And consume them like regular React components:
|
45 |
|
46 | import {Label} from './styles.react.css'
|
47 |
|
48 | <Label /> // => <div className="<autogenerated classname>">...</div>
|
49 |
|
50 | ## Variants
|
51 |
|
52 | You can define additional styling variants for your components:
|
53 |
|
54 | Label {
|
55 | color: red;
|
56 | }
|
57 |
|
58 | Label:emphasis {
|
59 | font-weight: bold;
|
60 | }
|
61 |
|
62 | They are compiled as CSS classes which then can be controlled from JS via
|
63 | `variant` prop:
|
64 |
|
65 | <Label variant={{emphasis: true}} /> // sets both classes with `color` and `font-weight`
|
66 |
|
67 | ## Prop variants
|
68 |
|
69 | You can define variants which are based on some JavaScript expression against
|
70 | props:
|
71 |
|
72 | Label {
|
73 | color: red;
|
74 | }
|
75 |
|
76 | Label:prop(mode == "emphasis") {
|
77 | font-weight: bold;
|
78 | }
|
79 |
|
80 | They are compiled as CSS classes which then can be controlled from JS:
|
81 |
|
82 | <Label mode="emphasis" /> // sets both classes with `color` and `font-weight`
|
83 |
|
84 | ## TODO
|
85 |
|
86 | * [ ] Support adding PostCSS transform to build pipeline (think autoprefixer).
|
87 |
|
88 | [CSS modules]: https://github.com/css-modules/css-modules
|