diff --git a/README.md b/README.md index e18c3f8..aa5dd52 100755 --- a/README.md +++ b/README.md @@ -99,32 +99,53 @@ class ComponentName extends React.Component { // ComponentName.displayName = 'ComponentName'; ``` +Please, note also that if you are using a functional stateless component, you have to wrap it with our function to make it work. +This function accepts the component as parameter of the first function and its name as parameter of its return: + +```js +import ReactCSSOM from 'react-cssom'; + +const Foo = ReactCSSOM.inject((props) => ( +
+ Hello {props.name} +
+))('Foo'); +``` + ### Adapting based on props -If you want to set styles based on props, you can do it in 2 ways: +If you want to set styles based on props, you can do it in 3 ways: -- Set inline styles, as we can see in this example: +- Using a style tag directly into the component: ```js -class Button extends React.Component { +export default class Button extends React.Component { static displayName = 'Button'; render() { return ( - +
+ + +
) } } ``` -- Set a specific class, maybe using css-modules, as we can see here: + +- Setting a specific class, maybe using css-modules, as we can see here: ```js import styles from './Button.css'; @@ -169,6 +190,26 @@ and here is the corresponding css, note the global selector: } ``` +- Setting inline styles, as we can see in this example: +```js +class Button extends React.Component { + + static displayName = 'Button'; + + render() { + return ( + + ) + } +} +``` + ## Change Log This project adheres to [Semantic Versioning](http://semver.org/).