# react-responsive-render > Update component on window or element resize Latest version **0.3.3** (published 2018-03-30) · MIT license · 0 weekly downloads ## Install ```sh npm install react-responsive-render pnpm add react-responsive-render yarn add react-responsive-render bun add react-responsive-render ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.3.3 | | Published | 2018-03-30 | | First published | 2018-03-18 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 46.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | morglod | | Maintainers | morglod | | Keywords | react, responsive, render, children | ## Links - npm: https://www.npmjs.com/package/react-responsive-render - Repository: https://github.com/Morglod/react-responsive-render - Homepage: https://github.com/Morglod/react-responsive-render#readme - Issues: https://github.com/Morglod/react-responsive-render/issues - npm.io page: https://npm.io/package/react-responsive-render ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.3.3 (latest) — 2018-03-30 - 0.3.2 — 2018-03-30 - 0.3.1 — 2018-03-30 - 0.3.0 — 2018-03-30 - 0.2.2 — 2018-03-30 - 0.2.0 — 2018-03-24 - 0.1.2 — 2018-03-19 - 0.1.1 — 2018-03-18 - 0.1.0 — 2018-03-18 - 0.0.1 — 2018-03-18 ## README [![npm package](https://img.shields.io/npm/v/react-responsive-render.svg?style=flat-square)](https://www.npmjs.org/package/react-responsive-render) # react-responsive-render React on window or element resize. ``` npm i react-responsive-render ``` * TypeScript support Components: * Responsive * [ResponsiveItems](https://youtu.be/GqFE9N1pJFc) * [SpaceAround](https://www.youtube.com/watch?v=vchfJJxB-9o) ## Usage Live demo ```js import { Responsive } from 'react-responsive-render'; ``` Handle window resize: ```js {({ width, height }) => (

Window: {width} x {height}

)} ``` Handle element size & position: ```js {({ width, height, left, top }) => (

    )}
</Responsive>
```

Use callback instead of render function:
```js
<Responsive toElement onChange={callback}>
    <Smth />
</Responsive>
```

Handle overflow:
```js
<ResponsiveItems
    items={buttons}
    minItemWidth={80}
>
    {({ children, restItems }) => (
        <ButtonGroup>
            {children}
            {restItems.length ?
                <DropDownButton
                    label="..."
                    children={restItems}
                /> : null}
        </ButtonGroup>
    )}
</ResponsiveItems>
```

Handle space around (eg for dropdown or tooltip):
```js
<SpaceAround
    calcStyle
    item={(status, style) => (
        <span className="tooltip" style={style}>
            This is tooltip for MyButton! {status}
        </span>
    )}
>
    <button children="MyButton" />
</SpaceAround>
```

## `Responsive` props

* `toElement` - Observe element's size (`false` by default).
* `resizeTimeout` - Timeout before update (`63` by default).
* `children` - Node or render function.
* `onChange({ width, height, left?, top? })` - Callback for any changes. `left`, `top` is position from `props.trackPosition` option.
* `trackPosition` - Track position (scroll for window mode / screen position for toElement mode).
* `fast` - `true` by default. If `false`, use `getComputedStyle` to get element's size.
* `immediate` - `false` by default. Update sizes and invoke `onChange` immediate after didMount.

## `ResponsiveItems` props

* `resizeTimeout` - Timeout before update (`63` by default).
* `items` - Array of items.
* `children` - Render function `children({ children, restItems })`.
* `minItemWidth` - Min required width per item (in pixels).
* `immediate` - `false` by default. Update sizes and invoke `onChange` immediate after didMount.

Handle vertical overflow:

* `rows=true` - Flag.
* `minItemHeight` - Min required height per item (in pixels).

## `SpaceAround` props

* `container` - Wrapper (`span` by default).
* `children` - Any children. Will be used as base element.
* `timeout` - Timeout in ms before update (`500` by default).
* `calcStyle` - Calculate styles for `props.item`.
* `item(status: SpaceAroundStatus, style?)` - Movable element renderer.
* `immediate` - `false` by default. Update sizes and invoke `onChange` immediate after didMount.

`SpaceAroundStatus` is one of:
* Top
* Bottom
* LeftTop
* LeftBottom

## TODO

* Storybook [Waiting for bugfix in release](https://github.com/storybooks/storybook/issues/3083)
* Documentation

---
_Source: https://npm.io/package/react-responsive-render · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._