You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Every React component gets a javascript constructor for the functional logic.
8
+
9
+
**Introducing the css constructor for styling!**
10
+
11
+
```js
12
+
importReactfrom'react';
13
+
importcssfrom'css-constructor';
14
+
15
+
exportdefaultclassHelloextendsReact.Component {
16
+
17
+
/* javascript constructor */
18
+
constructor (props) {
19
+
super(props);
20
+
}
21
+
22
+
/* css constructor */
23
+
@css`
24
+
font-size: 16px;
25
+
text-align: center;
26
+
color: #5AF78E;
27
+
font-family: monospace;
28
+
`
29
+
30
+
render () {
31
+
return<div>Styled text!</div>
32
+
}
33
+
};
34
+
```
35
+
36
+
Features:
37
+
38
+
π Supports real css
39
+
40
+
πΌ Attaches **inline styles** to the highest element in your component
41
+
42
+
π Offical library emoji
43
+
44
+
45
+
46
+
*Coming soon*
47
+
48
+
49
+
50
+
π₯ use props in css
51
+
52
+
π classes instead of inline styles
53
+
54
+
π± media queries support
55
+
56
+
57
+
#### Usage
58
+
59
+
```
60
+
npm install css-constructor --save
61
+
62
+
Add a @css block just before the render function (important)
63
+
64
+
Bonus: It also works with the offical emoji
65
+
@π`
66
+
color: #FF6962;
67
+
`
68
+
```
69
+
70
+
You can start using this right away. Even though π is in `BETA`, the `@css` block will always remain the same.
71
+
72
+
73
+
css-constructor π uses [ES7 class function decorators](https://github.com/wycats/javascript-decorators) on the render function.
74
+
75
+
76
+
#### Inspiration
77
+
78
+
Heavily inspired from [glamor](https://github.com/threepointone/glamor), [styled-components](https://github.com/styled-components/styled-components) and [radium](https://github.com/FormidableLabs/radium)
79
+
80
+
#### Support
81
+
82
+
If you think π is useful for your project, βοΈ this repo for my motivation ππ»
0 commit comments