# react-adaptive-layout

> React component that helps to make adaptive layout

Latest version **1.0.0** (published 2019-07-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-adaptive-layout
pnpm add react-adaptive-layout
yarn add react-adaptive-layout
bun add react-adaptive-layout
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-07-03 |
| First published | 2019-07-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 25.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Dymarchyk |
| Maintainers | dim_sergeich |

## Links

- npm: https://www.npmjs.com/package/react-adaptive-layout
- Repository: https://github.com/dymarchyk/react-adaptive-layout
- Issues: https://github.com/dymarchyk/react-adaptive-layout/issues
- npm.io page: https://npm.io/package/react-adaptive-layout

## Recent versions

- 1.0.0 (latest) — 2019-07-03

## README

# react-adaptive-layout

> React component that helps to make adaptive layout.


[![npm version](https://badge.fury.io/js/react-adaptive-layout.svg)](https://badge.fury.io/js/react-adaptive-layout)


## Install

```bash
npm install react-adaptive-layout
```
or

```bash
yarn add react-adaptive-layout
```

## Usage

This is basic example:
```jsx
import Layout from 'react-adaptive-layout'
...
render(){
    return(
       <Layout>
            {
                ({width}) => {
                    return width < 768
                        ? <img 
                            src="http://placekitten.com/g/300/300" 
                            alt="Wanna some small kitty"/>
                        : <img 
                            src="http://placekitten.com/g/800/600" 
                            alt="Wanna some big kitty"/>
                }
            }
        </Layout>
    )
}
```
You can provide a prop `shouldRender` and use it as common component:

```jsx 

<Layout shouldRender={ window.innerWidth > 1280.991 }>
    <p>
        Welcome PC user =)
    </p>
</Layout>
```

## Static methods.
Here are some helper methods and constants.
## Layout.breakpoints
Default breakpoints.

| Name | Width |
| ---  |  ---  |
|  xs  |  480  |
|  sm  |  576  |
|  md  |  990  |
|  lg  |  1024 |
|  xl  |  1280 |
|  xxl |  1920 |

```js
Layout.breakpoints.sm => 576
```

## Layout.inRange(value, start, end) => `boolean`
Check if value between start and end.

| Param | Type | Description |
| --- | --- | --- |
| value | `number` |  |
| start | `string | number` | One of Layout.breakpoints key or a number |
| end | `string | number` | One of Layout.breakpoints key or a number |

**Example**  
```js
Layout.inRange(1280, 'sm', 1024) => true
```

## Layout.setBreakPoint(point)
Add or update breakpoints.

| Param | Type | Description |
| --- | --- | --- |
| point | `Object` | Object to merge with break points. |

**Example**  
```js
Layout.setBreakPoint({custom: 320, sm: 480})
```

## Layout.isMobile(), Layout.isTablet(), Layout.isDesktop()
Checking screen width.
```js
Layout.isMobile() => true
Layout.isTablet() => false
```

## License

MIT © [Dmitriy Dymarchyk](https://github.com/dymarchyk)

---
_Source: https://npm.io/package/react-adaptive-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._