react-sizeme

What is react-sizeme?

The react-sizeme package is a React higher-order component (HOC) that makes it easy to get the dimensions of a component. It provides a way to measure the size of a component and pass those dimensions as props to the component, enabling responsive design and dynamic rendering based on component size.

What are react-sizeme's main functionalities?

Basic Usage

This example demonstrates the basic usage of react-sizeme. The SizeMe HOC is used to wrap a component, and it injects the size (width and height) as props into the wrapped component.

```jsx
import React from 'react';
import { SizeMe } from 'react-sizeme';

const MyComponent = ({ size }) => (
  <div>
    {`Width: ${size.width}, Height: ${size.height}`}
  </div>
);

const SizeAwareComponent = SizeMe({ monitorHeight: true })(MyComponent);

export default SizeAwareComponent;
```

Using with Functional Components

This example shows how to use react-sizeme with functional components. The SizeMe HOC wraps the functional component and provides the size as props.

```jsx
import React from 'react';
import { SizeMe } from 'react-sizeme';

const MyFunctionalComponent = ({ size }) => (
  <div>
    {`Width: ${size.width}, Height: ${size.height}`}
  </div>
);

const SizeAwareFunctionalComponent = SizeMe({ monitorHeight: true })(MyFunctionalComponent);

export default SizeAwareFunctionalComponent;
```

Custom Configuration

This example demonstrates how to use custom configuration options with react-sizeme. The options include monitoring width and height, setting a refresh rate, and disabling the placeholder.

```jsx
import React from 'react';
import { SizeMe } from 'react-sizeme';

const MyComponent = ({ size }) => (
  <div>
    {`Width: ${size.width}, Height: ${size.height}`}
  </div>
);

const SizeAwareComponent = SizeMe({
  monitorWidth: true,
  monitorHeight: true,
  refreshRate: 100,
  noPlaceholder: true
})(MyComponent);

export default SizeAwareComponent;
```

Other packages similar to react-sizeme

react-measure

react-measure is a package that provides a higher-order component and a render prop component to measure the size of a component. It offers more flexibility with render props and supports more detailed measurements like margins and padding. Compared to react-sizeme, react-measure provides more granular control over what measurements are taken and how they are used.

react-resize-detector

react-resize-detector is a lightweight package that provides a higher-order component and a hook to detect resize events on a component. It is simpler and more focused on detecting resize events rather than providing detailed size measurements. Compared to react-sizeme, react-resize-detector is more lightweight and easier to use for simple resize detection.

react-use-measure

react-use-measure is a hook-based package that provides a way to measure the size of a component using the ResizeObserver API. It is modern and hook-based, making it a good fit for functional components and hooks-based codebases. Compared to react-sizeme, react-use-measure is more modern and leverages the latest React features.

README

Make your React Components aware of their width and height

What is this for?

Find out the dimensions (width/height) available to your rendered React Components.

Caveats.