See an example

The Responsive component measures it's children and allows you to change their contents and layout based on the size so that it can show different states for different sizes. This is great if you'd like to have the same component work on devices with different screen sizes.

It is loosely based on the idea of element queries, which is a better alternative to media queries, as it allows you to respond based on elements, not just on the window. It uses the ResizeObserver api for high performance, with a fallback to polyfill.

Install

Install the Respo package to your project.

$ yarn add respo

Import the Responsive component into your project.

import { Responsive } from "respo"

Usage

The Responsive component takes a render prop and it passes a:

• size containing {width: number, height: number}
• device that can be screen, tablet or mobile based on width

<Responsive>
    {(size, device) => (
    <div style={style}>
        {size.width} x {size.height} {device}
    </div>
    )}
</Responsive>

Issues

• It does not work wel with the height of absolute or fixed elements, because they don't resize their parent div.
• If the polyfill kicks in, too many Responsive components could impact page resize performance, but it should be able to handle a lot on modern browsers.