Merge either

Fixes #3

Squashed commit of the following:

commit 1010a1f
Author: sospedra <[email protected]>
Date:   Sat Jun 3 00:56:29 2017 +0200

    2.2.0

commit b007e5b
Author: sospedra <[email protected]>
Date:   Sat Jun 3 00:54:03 2017 +0200

    chore: Add src/ to npmignore to make dist bundle more lightweight

commit 041f172
Author: sospedra <[email protected]>
Date:   Sat Jun 3 00:53:37 2017 +0200

    chore: Update demo with Either feature

commit 2b27326
Author: sospedra <[email protected]>
Date:   Sat Jun 3 00:49:10 2017 +0200

    docs: Add Either feature props and showcase

commit a2552e4
Author: sospedra <[email protected]>
Date:   Sat Jun 3 00:41:52 2017 +0200

    chore: Update yarn version and dist files

commit e13e8df
Author: sospedra <[email protected]>
Date:   Sat Jun 3 00:41:17 2017 +0200

    test: Cover either feature

commit 8f1df0d
Author: sospedra <[email protected]>
Date:   Sat Jun 3 00:40:57 2017 +0200

    feat: Add either feature using props `or` and `orWith`

.npmignore

@@ -1,5 +1,6 @@
 demo
 test
+src
 .travis.yml
 yarn.lock
 rollup.config.js

README.md

@@ -24,6 +24,8 @@ Compatible with *React*, *React-Native* and *ReactVR*.
 
 ### Usage
 
+#### Maybe
+
 There are three props you can use: `of`, `when` and `with`.
 
 ```js
@@ -44,17 +46,44 @@ or a function.
 />
 ```
 
+#### Either
+
+But not only this! Conditional rendering isn't only about mount this component
+or not. We can also use Mayre to render either this element or the other.
+
+```js
+<Mayre
+  of={<p>Either this</p>}
+  or={<p>Or this one</p>}
+  when={whateverCondition}
+/>
+```
+
+If a `with` prop is provided it'll be applied to both of them. If you want to specify special props for each of them use `orWith`.
+
+```js
+<Mayre
+  of={<p>Either this</p>}
+  or={<p>Or this one</p>}
+  when={whateverCondition}
+  with={{ appliedTo: 'of' }}
+  orWith={{ appliedTo: 'this will used by or element' }}
+/>
+```
+
 ### Props
 
-| Name | Required | Default | Type              |Comment                              |
-|------|----------|---------|-------------------|-------------------------------------|
-| of   | Yes      | -       | `func`, `element` | The React component to be rendered  |
-| when | No       | `false` | `bool`, `func`    |The render condition                 |
-| with | No       | `{}`    | `object`          |Props to be passed to `of` component |
+| Name   | Required | Default | Type              |Comment                                 |
+|--------|----------|---------|-------------------|----------------------------------------|
+| of     | Yes      | -       | `func`, `element` | The React component to be rendered     |
+| or     | No       | `null`  | `func`, `element` | The React component rendered instead of `of`  |
+| when   | No       | `false` | `bool`, `func`    | The render condition                    |
+| with   | No       | `{}`    | `object`          | Props to be passed to `of/or` component |
+| orWith | No       | `{}`    | `object`          | Props to be passed to `or` component    |
 
 ### Benefit
 
-Stop doing this. No more.
+Stop doing this:
 
 ```js
 // no more dumb render methods pollution

demo/src/App.js

@@ -6,7 +6,7 @@ import './App.css';
 const MAX_COUNTER = 5;
 
 const Conditional = (props) => (
-  <h2>I'll disappear when {props.name} gets to {MAX_COUNTER}</h2>
+  <h2>I will disappear when {props.name} gets to {MAX_COUNTER}</h2>
 )
 
 class App extends Component {
@@ -41,8 +41,10 @@ class App extends Component {
           />
 
           <Mayre
-            of={<h4>And I'll disappear when gets to the double</h4>}
+            of={({ text }) => <h4>{text}</h4>}
+            or={({ text }) => <h3>{text}</h3>}
             when={this.state.counter < MAX_COUNTER * 2}
+            with={{ text: 'And I will change the size when gets to the 10' }}
           />
         </div>
       </div>