Issue title: Example - Conditional rendering
 Issue body: Case component for demonstration of alternative way to style blocks and conditional rendering.

https://codesandbox.io/s/1rpn0ymxo4
 Comments: 
 Comment 0: Thank you for submitting an example, @lokhmakov! Please give me some time, I will read through it and provide a feedback.
 Comment 1: I find this example interesting, but I believe it demonstrates the React render pattern more than it does any of Atomic layout features. What I mean is that since you render Composition as an actual component, you can build any abstraction on top of it (if necessary). Since state/props changes in React produce a new render, you can make your compositions reactive.

One thing I find obstructive is the complexity of such implementation. I think the code takes some significant time to fully comprehend. Again, maybe that if fine for the particular use case, yet I wouldn't use this as a conditional rendering example of Atomic layout, which tries to encourage simplicity.

At the moment there are two ways to conditionally render areas in Atomic layout:

### 1. Conditional template definition

As mentioned, a template definition can be kept in state, and updated on runtime, which may be utilized to render different areas:

```jsx
const Post = () => {
  const [template, setTemplate] = React.useState(`logo menu`)

  return (
    <Composition template={template}>
      {({ Logo, Menu, Actions }) =>(
        <React.Fragment>
          <Logo>...</Logo>
          <Menu>...</Menu>
          <Actions>...</Actions>

          <button onClick={() => setTemplate('menu actions logo')}Change layout</button>
        </React.Fragment>
      )}
    </Composition>
  )
}
```

Updating the value of the `template` prop will cause the composition, and its areas, to re-render. The next template string will be used, affecting the areas position *and presence* (`Actions` area will be rendered conditionally).

### 2. Using responsive utilities

At the moment there is the `Only` component dedicated for conditional rendering.

```jsx
import { Only } from 'atomic-layout'

const Post = () => {
  return (
    <Only to="md">See me before "md" comes</Only>
    <Only from="md" to="lg">Then you will see me</Only>
    <Only from="lg">Finally, I'm here</Only>
  )
}
```
 
You can read more about `Only` in the [docs](https://redd.gitbook.io/atomic-layout/components/only).

---

Forgive me in case I don't understand your intention or requirements properly. May I ask you what is the goal you try to achieve by providing such abstraction? Perhaps, there are use cases that I haven't thought yet, and we can figure out how to cover them as well.

Thank you!
 Comment 2: > Updating the value of the template prop will cause the composition, and its areas, to re-render. The next template string will be used, affecting the areas position and presence (Actions area will be rendered conditionally)

I agree and this is a prototype and there is the place for optimisation.

> At the moment there is the Only component dedicated for conditional rendering

Yep, I created task with Only and SSR.

> Forgive me in case I don't understand your intention or requirements properly.

Main thing it revise conditional rendering not only based on media query of components and integrate one of solution.

On reactiflux we discuss it with @slightlytyler#0147 they use Branch and trying MultiBranch components where u use condition as a props.

Also I see Power in composition something similar to Box inside Composition based on conditional rendering.

For example we have CSS grid and input props for errors and we need conditional rendering internals of some Area.

```
<Composition ...>
  {({ Header, Content }) => <>
    <Header>
      <ErrorItem>
        <ErrorFlag />
      </ErrorItem>
    </Header>
    <Content>
      <Box>
        <MyMegaComponent
          error={
            <ErrorItem>
              Error message
            </ErrorItem>
          }
        />
      </Box>
    </Content>
  </>}
</Composition>
```

In classical way we doing something like:

```
<Composition ...>
  {({ Header, Content }) => <>
    <Header>
      {errors.length && <ErrorItem>
        <ErrorFlag />
      </ErrorItem>}
    </Header>
    <Content>
      <Box>
        <MyMegaComponent
          error={
            {errors.length && <ErrorItem>
              Error message
            </ErrorItem>}
          }
        />
      </Box>
    </Content>
  </>}
</Composition>
```

I think we can add something like isShow to Only component or something like this.

Still think about it.
 Comment 3: I would say Only should only concern itself with media queries and breakpoints. Conditional rendering like this falls out of the scope of atomic-layout.

Ideally, the case with displaying elements based on media queries would be that the element would still be rendered just with a "display: none" attribute on certain breakpoints. The element is rendered to the screen, just not displayed via CSS. The same DOM is (in an ideal world) used for mobile and desktop and tablet views. This isn't the case with a lot of libraries, it's just my way of seeing things. I say this because conditional layout rendering is more expensive since react has to listen to window resize events, and there would be issues in hydration from a server rendered app.

I would just handle this in your components, or create your own abstraction.

```js
const ErrorItem = ({ displayOn, children }) => {
   if (!displayOn) {
      return null
   }

   return children
}

<ErrorItem displayOn={errors.length>
   <ErrorFlag />
</ErrorItem >
```

Just my 2 cents.
 Comment 4: @lokhmakov while reading your reply I kept thinking about:

```jsx
<Only when={errors.length > 0}><Errors data={errors} /></Only>
```

However, this would indeed break the expected nature of Only operating with breakpoints (which @bitttttten has pointed out 👍). In terms of API design I wouldn't complicate `Only` to resolve a non-layout conditions, since not each conditional rendering is necessarily a layout question.

Could you please tell me more about those Branch components?
 Comment 5: I'm closing this, since it's not originally an issue with the library.

As mentioned above, you can use `<Only/>` for basic conditional rendering of react components, or implement your custom wrapper around it, or other approach, that would suit your needs.
{'source': 'GithubIssues', 'repo_name_with_owner': 'kettanaito/atomic-layout', 'issue_id': 415335307, 'repo_stars': 1102.0}