- add gifs

- add props

Author: Muhammet Ozturk

README.md

@@ -2,6 +2,8 @@
 
 This library for dedecting device type from parent dom.
 
+Demo : http://panoramic-cake.surge.sh/
+
  ## Getting started
 
  1. Install with yarn:
@@ -14,4 +16,91 @@ This library for dedecting device type from parent dom.
 
  ```shell
  npm install react-element-based-device-dedector
- ```
+ ```
+ 
+ ## Usage
+ 
+ ```jsx
+ import React, { Component } from 'react';
+ import { render } from 'react-dom';
+ import ReactResizeDetector from 'react-resize-detector';
+ import ElementBasedDeviceDedector from '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}/>
+ </div>
+ );
+ }
+ 
+ onResize = () => {
+ ...
+ }
+ }
+ 
+ render(<App />, document.getElementById('root'));
+ ```
+ 
+## 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://panoramic-cake.surge.sh/
+ 
+ ## API
+ 
+ | Prop | Type | Description | Default |
+ | ------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
+ | onChangeType | Func | Function that will be invoked with `name` and `lastBreakpointPx` arguments | n/a |
+ | 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` |

full.gif

@@ -25,21 +25,21 @@
  },
  "devDependencies": {
  "@babel/cli": "^7.1.5",
- "react": "^16.6.3",
- "react-dom": "^16.6.3",
- "react-scripts": "2.1.1",
+ "@babel/core": "^7.1.6",
+ "@storybook/addon-actions": "^4.0.9",
+ "@storybook/addon-links": "^4.0.9",
+ "@storybook/addons": "^4.0.9",
+ "@storybook/react": "^4.0.9",
+ "babel-loader": "^8.0.4",
  "eslint-config-airbnb": "^17.1.0",
  "eslint-config-prettier": "^3.3.0",
  "eslint-plugin-import": "^2.14.0",
  "eslint-plugin-jsx-a11y": "^6.1.2",
  "eslint-plugin-prettier": "^3.0.0",
  "prettier": "^1.15.2",
- "@storybook/react": "^4.0.9",
- "@storybook/addon-actions": "^4.0.9",
- "@storybook/addon-links": "^4.0.9",
- "@storybook/addons": "^4.0.9",
- "@babel/core": "^7.1.6",
- "babel-loader": "^8.0.4"
+ "react": "^16.6.3",
+ "react-dom": "^16.6.3",
+ "react-scripts": "2.1.1"
  },
  "scripts": {
  "start": "react-scripts start",

middle.gif

@@ -41,14 +41,13 @@ class ElementBasedDeviceDedector extends PureComponent {
  };
 
  render() {
- const { refreshRate } = this.props;
- return <ReactResizeDetector handleWidth onResize={this.onResize} refreshRate={refreshRate} />;
+ const { refreshRate, ...otherProps } = this.props;
+ return <ReactResizeDetector handleWidth onResize={this.onResize} {...otherProps} />;
  }
 }
 
 ElementBasedDeviceDedector.propTypes = {
  onChangeType: PropTypes.func.isRequired,
- refreshRate: PropTypes.number,
  devices: PropTypes.arrayOf(
  PropTypes.shape({
  name: PropTypes.string,
@@ -58,7 +57,6 @@ ElementBasedDeviceDedector.propTypes = {
 };
 
 ElementBasedDeviceDedector.defaultProps = {
- refreshRate: 500,
  devices: [
  {
  name: 'mobile',

package.json

@@ -1,27 +1,10 @@
 import React from 'react';
-
 import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button, Welcome } from '@storybook/react/demo';
 import FullWidthExample from '../examples/FullWidthExample';
 import SmallWidthExample from '../examples/SmallWidthExample';
 import MiddleExample from '../examples/MiddleExample';
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
- .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
- .add('with some emoji', () => (
- <Button onClick={action('clicked')}>
- <span role="img" aria-label="so cool">
- 😀 😎 👍 💯
- </span>
- </Button>
- ));
-
-storiesOf('Full Width', module)
+storiesOf('Examples', module)
  .add('Full', () => <FullWidthExample />)
  .add('Small Size', () => <SmallWidthExample />)
  .add('Middle', () => <MiddleExample />);