react-element-based-device-dedector v0.2.0

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:

   yarn add react-element-based-device-dedector

   or with npm:

   npm install react-element-based-device-dedector

   Usage

   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(, 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

git clone https://github.com/hlthi/react-element-based-device-dedector.git
cd react-element-based-device-dedector
yarn storybook

Example Gifs

• Middle
• Small
• Full

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

Default devices

 const devices: [
    // below 768px
    {
      name: 'mobile',
      breakpointPx: 768,
    },
    // 768px - 991px
    {
      name: 'tablet',
      breakpointPx: 992,
    },
    // 992px - 1200px
    {
      name: 'computer',
      breakpointPx: 1200,
    },
  ]

API