diff --git a/README.md b/README.md index 5ba6328..8de7701 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,21 @@ -[![npm version](https://img.shields.io/npm/v/react-css-themr.svg?style=flat-square)](https://www.npmjs.com/package/react-css-themr) -[![Build Status](http://img.shields.io/travis/javivelasco/react-css-themr/master.svg?style=flat-square)](https://travis-ci.org/javivelasco/react-css-themr) -[![NPM Status](http://img.shields.io/npm/dm/react-css-themr.svg?style=flat-square)](https://www.npmjs.com/package/react-css-themr) +[![npm version](https://img.shields.io/npm/v/for-react-css-themr.svg?style=flat-square)](https://www.npmjs.com/package/for-react-css-themr) +[![Build Status](http://img.shields.io/travis/FriendsOfReactJS/for-react-css-themr/master.svg?style=flat-square)](https://travis-ci.org/FriendsOfReactJS/for-react-css-themr) +[![NPM Status](http://img.shields.io/npm/dm/for-react-css-themr.svg?style=flat-square)](https://www.npmjs.com/package/for-react-css-themr) -# React CSS Themr +# Friends of react: React CSS Themr + +``` +⚛️️️❗️❗️⚛️ +This is a fork of React CSS Themr, that is not maintained anymore. We thank Javi Velasco for all his efforts and for +creating such a great package. This package should not be unmaintained - so the friends of react will continue. + +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-`. +``` Easy theming and composition for CSS Modules. ``` -$ npm install --save react-css-themr +$ npm install --save for-react-css-themr ``` **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) 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**. -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. +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. ## Combining CSS modules @@ -41,7 +49,7 @@ Say you have a `Button` component you want to make themeable. You should pass a ```jsx // Button.js import React, { Component } from 'react'; -import { themr } from 'react-css-themr'; +import { themr } from 'for-react-css-themr'; @themr('MyThemedButton') class Button extends Component { @@ -80,7 +88,7 @@ If you use a component with a base theme, you may want to import the component w ```jsx // SuccessButton.js import React, { Component } from 'react'; -import { themr } from 'react-css-themr'; +import { themr } from 'for-react-css-themr'; import successTheme from './SuccessButton.css'; @themr('MySuccessButton', successTheme) @@ -129,7 +137,7 @@ Although context theming is not limited to ui-kits, it's very useful to avoid de ```jsx import React from 'react'; import { render } from 'react-dom'; -import { ThemeProvider } from 'react-css-themr'; +import { ThemeProvider } from 'for-react-css-themr'; import App from './app' const contextTheme = { @@ -174,4 +182,4 @@ Thanks to [Nik Graf](http://www.twitter.com/nikgraf) and [Mark Dalgleish](http:/ ## License -This project is licensed under the terms of the [MIT license](https://github.com/javivelasco/react-css-themr/blob/master/LICENSE). +This project is licensed under the terms of the [MIT license](https://github.com/FriendsOfReactJS/for-react-css-themr/blob/master/LICENSE). diff --git a/package.json b/package.json index 4fee3ce..a8fe252 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "react-css-themr", - "description": "React CSS Themr", - "homepage": "https://github.com/javivelasco/react-css-themr#readme", + "name": "for-react-css-themr", + "description": "Friends of ReactJS: React CSS Themr", + "homepage": "https://github.com/FriendsOfReactJS/for-react-css-themr#readme", "version": "2.1.2", "main": "./lib", "author": { @@ -11,17 +11,19 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/javivelasco/react-css-themr.git" + "url": "git+https://github.com/FriendsOfReactJS/for-react-css-themr.git" }, "bugs": { - "url": "https://github.com/javivelasco/react-css-themr/issues" + "url": "https://github.com/FriendsOfReactJS/for-react-css-themr/issues" }, "keywords": [ "css-modules", "customization", "react", "react-css-themr", - "theming" + "theming", + "for-react-css-themr", + "friends of react" ], "dependencies": { "hoist-non-react-statics": "^1.2.0", diff --git a/src/components/themr.js b/src/components/themr.js index e19711f..ef6d091 100644 --- a/src/components/themr.js +++ b/src/components/themr.js @@ -92,7 +92,7 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) => getNamespacedTheme(props) { const { themeNamespace, theme } = props if (!themeNamespace) return theme - if (themeNamespace && !theme) throw new Error('Invalid themeNamespace use in react-css-themr. ' + + if (themeNamespace && !theme) throw new Error('Invalid themeNamespace use in for-react-css-themr. ' + 'themeNamespace prop should be used only with theme prop.') return Object.keys(theme) @@ -262,7 +262,7 @@ function merge(original = {}, mixin = {}) { function validateComposeOption(composeTheme) { if ([ COMPOSE_DEEPLY, COMPOSE_SOFTLY, DONT_COMPOSE ].indexOf(composeTheme) === -1) { throw new Error( - `Invalid composeTheme option for react-css-themr. Valid composition options\ + `Invalid composeTheme option for for-react-css-themr. Valid composition options\ are ${COMPOSE_DEEPLY}, ${COMPOSE_SOFTLY} and ${DONT_COMPOSE}. The given\ option was ${composeTheme}` ) diff --git a/test/components/themr.spec.js b/test/components/themr.spec.js index 430bf01..4b72931 100644 --- a/test/components/themr.spec.js +++ b/test/components/themr.spec.js @@ -351,7 +351,7 @@ describe('Themr decorator function', () => { - )).toThrow(/Invalid themeNamespace use in react-css-themr. themeNamespace prop should be used only with theme prop./) + )).toThrow(/Invalid themeNamespace use in for-react-css-themr. themeNamespace prop should be used only with theme prop./) }) it('when providing a themeNamespace prop composes a theme', () => {