File tree 1 file changed +14
-10
lines changed
1 file changed +14
-10
lines changed Original file line number Diff line number Diff line change 1
1
### CSS constructor π for React components
2
2
3
3
![ beta] ( https://img.shields.io/badge/status-beta-yellow.svg )
4
+ --
4
5
5
-
6
-
7
- Every React component gets a javascript constructor for the functional logic.
6
+ Every React component gets a javascript constructor for functional logic.
8
7
9
8
** Introducing the css constructor for styling!**
10
9
@@ -33,45 +32,50 @@ export default class Hello extends React.Component {
33
32
};
34
33
```
35
34
36
- Features:
35
+ --
36
+
37
+ ** Features:**
37
38
38
39
π Supports real css
39
40
40
41
πΌ Attaches ** inline styles** to the highest element in your component
41
42
42
43
π Offical library emoji
43
44
44
-
45
+ --
45
46
46
47
* Coming soon*
47
48
48
-
49
-
50
49
π₯ use props in css
51
50
52
51
π classes instead of inline styles
53
52
54
53
π± media queries support
55
54
55
+ --
56
56
57
57
#### Usage
58
58
59
59
```
60
60
npm install css-constructor --save
61
+ ```
61
62
62
- Add a @css block just before the render function (important)
63
+ Add a ` @css ` block just before the ` render ` function (important)
63
64
64
65
Bonus: It also works with the offical emoji
66
+ ``` js
65
67
@π`
66
68
color: #FF6962;
67
69
`
68
70
```
69
71
70
- You can start using this right away. Even though π is in ` BETA ` , the ` @css ` block will always remain the same.
72
+ You can start using this right away. Even though π is in ` BETA ` , the ` @css ` block will always look the same.
71
73
72
74
73
- css-constructor π uses [ ES7 class function decorators ] ( https://github.com/wycats/javascript-decorators ) on the render function.
75
+ #### How does it work?
74
76
77
+ π uses [ ES7 class function decorators] ( https://github.com/wycats/javascript-decorators ) on the render function.
78
+ I'll probably write a detailed post about it.
75
79
76
80
#### Inspiration
77
81
You canβt perform that action at this time.
0 commit comments