# react-element-based-device-dedector

> This library for dedecting device type from parent dom.

Latest version **0.2.0** (published 2019-01-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-element-based-device-dedector
pnpm add react-element-based-device-dedector
yarn add react-element-based-device-dedector
bun add react-element-based-device-dedector
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2019-01-22 |
| First published | 2018-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Muhammet Öztürk |
| Maintainers | hlthi |
| Keywords | react, resize, dom, element, device, detector |

## Links

- npm: https://www.npmjs.com/package/react-element-based-device-dedector
- Repository: https://github.com/hlthi/react-element-based-device-dedector
- Homepage: https://github.com/hlthi/react-element-based-device-dedector#readme
- Issues: https://github.com/hlthi/react-element-based-device-dedector/issues
- npm.io page: https://npm.io/package/react-element-based-device-dedector

## Dependencies (1)

- [react-resize-detector](https://npm.io/package/react-resize-detector.md) ^3.2.1

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2019-01-22
- 0.1.9 — 2018-11-27
- 0.1.8 — 2018-11-27
- 0.1.7 — 2018-11-27
- 0.1.6 — 2018-11-27
- 0.1.5 — 2018-11-27
- 0.1.4 — 2018-11-27
- 0.1.3 — 2018-11-27
- 0.1.2 — 2018-11-26
- 0.1.1 — 2018-11-26
- 0.1.0 — 2018-11-26

## README

# react-element-based-device-dedector

This library for dedecting device type from parent dom.

Demo : http://pathetic-cart.surge.sh

 ## Getting started
 
 1.  Install with yarn:
 
 ```shell
 yarn add react-element-based-device-dedector
 ```
 
 or with npm:
 
 ```shell
 npm install react-element-based-device-dedector
 ```
 
 ## Usage
 
 ```jsx
 import React, { Component } from 'react';
 import { render } from 'react-dom';
 import ElementBasedDeviceDedector from 'react-element-based-device-dedector';

const devices = [
  {
    name: 'mobile1',
    breakpointPx: 300,
  },
  {
    name: 'mobile2',
    breakpointPx: 400,
  },
  {
    name: 'mobile3',
    breakpointPx: 500,
  },
  {
    name: 'mobile4',
    breakpointPx: 600,
  },
];
 
 class App extends PureComponent {
     state = {
       type: null,
       lastBreakpoint: null,
     };
 
 handleChangeType = (name, lastBreakpoint) => {
     // set state or do whatever want
     this.setState({
       type : name,
       lastBreakpoint,
     });
   };
   
   render() {
     return (
       <div>
         ...
        <ElementBasedDeviceDedector onChangeType={this.handleChangeType} devices={devices}/>
       </div>
     );
   }
 
   onResize = () => {
     ...
   }
 }
 
 render(<App />, document.getElementById('root'));
 ```
 
## Usage With React Hook
 ```jsx
import React, { useState } from 'react';
import ElementBasedDeviceDedector from 'react-element-based-device-dedector';

const DomDevice = props => {
  const { children } = props;
  const [type, setType] = useState(null);
  return (
    <div>
      <div>{`Device Type : ${type}`}</div>
      {children}
      <ElementBasedDeviceDedector onChangeType={deviceType => setType(deviceType)} />
    </div>
  );
};


export default DomDevice;
 ```

 
## Storybook Examles
  ```shell
  git clone https://github.com/hlthi/react-element-based-device-dedector.git
  cd react-element-based-device-dedector
  yarn storybook
  ```
  
## Example Gifs
  - Middle
![](middle.gif)
  
  - Small
![](small.gif)
   
  - Full
![](full.gif)
 
Live : http://pathetic-cart.surge.sh

## Default devices
```javascript
 const devices: [
    // below 768px
    {
      name: 'mobile',
      breakpointPx: 768,
    },
    // 768px - 991px
    {
      name: 'tablet',
      breakpointPx: 992,
    },
    // 992px - 1200px
    {
      name: 'computer',
      breakpointPx: 1200,
    },
  ]
   ```
 
 ## API
 
 | Prop               | Type   | Description                                                                                                                                                                                            | Default     |
 | ------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
 | onChangeType       | Func   | Function that will be invoked with `name` and `lastBreakpointPx` arguments                                                                                                                                      | n/a         |
 | devices            | array  | Define values|    {name: 'mobile', breakpointPx: 768},{name: 'tablet', breakpointPx: 992},  {name: 'computer', breakpointPx: 1200}|
 | skipOnMount        | Bool   | Do not trigger onChangeType when a component mounts                                                                                                                                                        | `false`     |
 | resizableElementId | String | Id of the element we want to observe. If none provided, parentElement of the component will be used                                                                                                    | `undefined` |
 | refreshMode        | String | Possible values: `throttle` and `debounce` See [lodash docs](https://lodash.com/docs#debounce) for more information. `undefined` - means that callback will be fired as often as ResizeObserver allows | `undefined` |
 | refreshRate        | Number | Only makes sense when `refreshMode` is set. Important! It's a numeric prop so set it accordingly, e.g. `refreshRate={500}`                                                                             | `1000`      |

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