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
This is a fork of React CSS Themr, that is not maintained anymore. We thank Javi Velasco for all his efforts and for
10
+
creating such a great package. This package should not be unmaintained - so the friends of react will continue.
11
+
12
+
Sadly Javi did not responed so we can not continue with the same package name. You find us now on npm with the prefix `for-`.
13
+
```
6
14
7
15
Easy theming and composition for CSS Modules.
8
16
9
17
```
10
-
$ npm install --save react-css-themr
18
+
$ npm install --save for-react-css-themr
11
19
```
12
20
13
21
**Note: Feedback and contributions on the docs are highly appreciated.**
@@ -22,7 +30,7 @@ Taking ideas from [future-react-ui](https://github.com/nikgraf/future-react-ui)
22
30
23
31
The most immediate way of providing a classname object is via *props*. In case you want to import a component with a theme already injected, you have to write a higher order component that does the job. This is ok for your own components, but for ui-kits like [React Toolbox](http://www.react-toolbox.com) or [Belle](http://nikgraf.github.io/belle/), you'd have to write a wrapper for every single component you want to use. In this fancy, you can understand the theme as a **set** of related classname objects for different components. It makes sense to group them together in a single object and move it through the component tree using a context. This way, you can provide a theme either via **context**, **hoc** or **props**.
24
32
25
-
The approach of react-css-themr consists of a *provider* and a *decorator*. The provider sets a context theme. The decorator adds to your components the logic to figure out which theme should be used or how should it be composed, depending on configuration, context and props.
33
+
The approach of for-react-css-themr consists of a *provider* and a *decorator*. The provider sets a context theme. The decorator adds to your components the logic to figure out which theme should be used or how should it be composed, depending on configuration, context and props.
26
34
27
35
## Combining CSS modules
28
36
@@ -41,7 +49,7 @@ Say you have a `Button` component you want to make themeable. You should pass a
41
49
```jsx
42
50
// Button.js
43
51
importReact, { Component } from'react';
44
-
import { themr } from'react-css-themr';
52
+
import { themr } from'for-react-css-themr';
45
53
46
54
@themr('MyThemedButton')
47
55
classButtonextendsComponent {
@@ -80,7 +88,7 @@ If you use a component with a base theme, you may want to import the component w
80
88
```jsx
81
89
// SuccessButton.js
82
90
importReact, { Component } from'react';
83
-
import { themr } from'react-css-themr';
91
+
import { themr } from'for-react-css-themr';
84
92
importsuccessThemefrom'./SuccessButton.css';
85
93
86
94
@themr('MySuccessButton', successTheme)
@@ -129,7 +137,7 @@ Although context theming is not limited to ui-kits, it's very useful to avoid de
0 commit comments