How to use the react-resize-aware.makeResizeAware function in react-resize-aware

To help you get started, we’ve selected a few react-resize-aware examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github FezVrasta / react-element-queries / src / index.js View on Github external
if (typeof arg === 'object') {
            Object.keys(arg).forEach(key => {
              parsedSelectors[key] = arg[key];
            });
          } else {
            parsedSelectors[arg] = true;
          }
        });

        return matches(queries, parsedSelectors, width, height);
      },
      ...props,
    });
  }

  return makeResizeAware(Enhanced);
}
github FezVrasta / react-element-queries / src / index.js View on Github external
queries: this.props.queries,
      width: this.props.width,
      height: this.props.height,
    };
  }

  render() {
    const {component, queries, getRef, children, proxy, ...props} = this.props;
    const ref = proxy ? {getRef} : {ref: getRef};
    return createElement(component, {...ref, ...props}, children);
  }

  static childContextTypes = contextTypes;
}

const ResizeAwareElementQuery = makeResizeAware(ElementQuery);

function matches(queries, selectors, width, height) {
  const results = Object.keys(queries).map(key => {
    const query = {...queries[key]};
    if (query.maxWidth) {
      query.maxWidth = query.maxWidth >= width;
    }
    if (query.minWidth) {
      query.minWidth = query.minWidth <= width;
    }
    if (query.maxHeight) {
      query.maxHeight = query.maxHeight >= height;
    }
    if (query.minHeight) {
      query.minHeight = query.minHeight <= height;
    }

react-resize-aware

A React hook that makes it possible to listen to element resize events.

MIT
Latest version published 8 months ago

Package Health Score

64 / 100
Full package analysis