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

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

Download Details:

Author: FezVrasta

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/FezVrasta/react-resize-aware

License: MIT

You Might Be Interested In:

Tags:

Add Comment