react-element-based-device-dedector
This library for dedecting device type from parent dom.
Demo : http://pathetic-cart.surge.sh
## Getting started
- 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 ; state = type: null lastBreakpoint: null ; { // set state or do whatever want this; }; { return <div> ... <ElementBasedDeviceDedector = =/> </div> ; } { ... } ;
Usage With React Hook
import React useState from 'react';import ElementBasedDeviceDedector from 'react-element-based-device-dedector'; const DomDevice = { const children = props; const type setType = ; return <div> <div>`Device Type : `</div> children <ElementBasedDeviceDedector = /> </div> ;}; ;
Storybook Examles
git clone https://github.com/hlthi/react-element-based-device-dedector.gitcd react-element-based-device-dedectoryarn 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
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 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 |