npm package: @invisionag/iris-react-views
Description: ```js import Views from '@invisionag/iris-react-views'; ```
Latest version: 3.2.2

```js
import Views from '@invisionag/iris-react-views';
```

```react-views``` is a bundle of layout components that wrap other components to standardise pages.

# Usage

## View

This component provides the outer frame for all content that is being displayed as part of the injixo web applications (excluding text heavy content like the injixo.com website, the blog and injixo docs).

Except the navigation elements of injixo, everything else has to be placed inside this container component.

There are two distinct versions of the container that should cover all usecases. In other words, every single page inside injixo has to use that content container component to ensure consistency across apps.

### What to consider

- Content inside the container has to adhere to the inner spacing of `1rem` to the container element
- Do not create any additional offsets or layouts inside the container, i.e. place content at top left corner inside the container

### Breakpoints for media queries

According to the usage statistics of injixo, there are only two relevant screen widths to consider:

1. Small / Mobile: below 768px 
2. Large / Desktop: 768px or wider

Keep in mind, that the mobile usage almost completely comes from injixo Me. This means that injixo Me has to be designed with that target group in mind. Every other injixo component must not be broken on mobile screens but can be designed based on the graceful degradation approach. This means, we deliver a reasonable user experience on mobile devices, but for example with a reduced feature set, read-only view or a reduced information density.

### Variants

#### 1. Full width

<img width="932" alt="Bildschirmfoto 2019-03-19 um 10 05 27" src="https://user-images.githubusercontent.com/1011847/54593326-90cfcf80-4a2e-11e9-8e07-6351b6eb0053.png">

```jsx 
import { View } from '@invisionag/iris-react-views';

<View>
  This is the page content
</View>
```

**To be used when**

- There is a lot of space needed to display relevant information
- Other full width elements such as a toolbar or a sidebar are part of the page
- Screens are small (mobile). It is the only option to display content on mobile screens

**Constraints**

- This is the only available layout option for small/mobile screens

**Characteristics**

- There is no offset on either side around the content container


#### 2. Centered

<img width="934" alt="Bildschirmfoto 2019-03-19 um 10 04 08" src="https://user-images.githubusercontent.com/1011847/54593336-975e4700-4a2e-11e9-948f-120ece146ab2.png">

```jsx 
import { View } from '@invisionag/iris-react-views';

<View centered>
  This is the page content
</View>
```

**To be used when**

- The space needed is limited, i.e. there would be an inbalance when content is being positioned at the top most left corner and the right section of the page would be almost empty

**Constraints**

- Screen has to be large/desktop. Centered layout must not be used on mobile screens to avoid loosing limited space

**Characteristics**

- Content container is limited to 1200px maximum width
- Below 1200px the content consumes 10 out of 12 columns or approx. 80% of the full page width


## ViewWithSidebar

Simply pass your view component as a child and your sidebar as a prop to layout your page.

```js
import { ViewWithSidebar } from '@invisionag/iris-react-views';

<ViewWithSidebar sidebar={<SomeDrawer />}>
  This is the page content
</ViewWithSidebar>
```