Listen The Resize Event In React – react-resize-aware

Category: Others , React | December 14, 2017
Author: FezVrasta
Views Total: 244
Official Page: Go to website
Last Update: December 14, 2017
License: MIT

A simple React.js component you can use to make any piece of UI aware of its size.

Each time the component’ size changes, your component will be notified by one of the methods described below. The size change can be detected by a window resize, a CSS media query, a CSS pseudo selector, a JavaScript action or really, anything.

Installation:

# Yarn
$ yarn add react-resize-aware

# NPM
$ npm install react-resize-aware --save

Basic Usage:

'use strict';

var _extends =
  Object.assign ||
  function(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };

function _objectWithoutProperties(obj, keys) {
  var target = {};
  for (var i in obj) {
    if (keys.indexOf(i) >= 0) continue;
    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
    target[i] = obj[i];
  }
  return target;
}

function MyComponent(_ref) {
  var width = _ref.width,
    height = _ref.height,
    getRef = _ref.getRef,
    children = _ref.children,
    props = _objectWithoutProperties(_ref, [
      'width',
      'height',
      'getRef',
      'children',
    ]);

  return React.createElement(
    'div',
    _extends({className: 'example', ref: getRef}, props),
    "Hover me! I don't rely on any DOM manipulation, transition event or anything, I use a real resize event!",
    React.createElement('br', null),
    width,
    'x',
    height,
    children
  );
}

function App() {
  return React.createElement(ReactResizeAware.default, {
    component: MyComponent,
    style: {position: 'relative'},
    onResize: function onResize(sizes) {
      return console.log(sizes);
    },
  });
}

ReactDOM.render(
  React.createElement(App, null),
  document.querySelector('#root')
);

Preview:

React Component For Accessible Sorting