https://github.com/pvande/react-viewport-monitor
Subscribe React components to viewport changes
https://github.com/pvande/react-viewport-monitor
higher-order-component react react-component viewport
Last synced: about 2 months ago
JSON representation
Subscribe React components to viewport changes
- Host: GitHub
- URL: https://github.com/pvande/react-viewport-monitor
- Owner: pvande
- Created: 2017-01-30T18:30:45.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-01-31T06:20:26.000Z (over 8 years ago)
- Last Synced: 2025-02-12T13:55:58.261Z (4 months ago)
- Topics: higher-order-component, react, react-component, viewport
- Language: JavaScript
- Size: 51.8 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-viewport-monitor
This [Higher-Order React component][HOC] enables you to write components that
respond to changes in the visible content.
## Example
``` jsx
import React from 'react';
import ViewportMonitor from 'viewport-monitor';
const viewportSelector = ({ top }) => ({ viewportEdge: top });
@ViewportMonitor(viewportSelector, 'top')
export default class Fixed extends React.PureComponent {
render() {
return (
I appear to be `position: fixed`!
);
}
}
```
## API
### `ViewportMonitor([selector], [...viewportProps]) => (Component) => WrappedComponent`
Subscribes the given `Component` to changes to the given `viewportProps`, which
it will receive as additional props.
#### Arguments
* `selector(viewport, [ownProps]) => mergeProps` – This function generates
additional props (to be merged atop the inbound props) from the `viewport`
definition, and will be invoked whenever the viewport is changed.
Additionally, this function may also receive the inbound props as a second
argument – in this case, `selector` will additionally be called whenever the
incoming props are changed. The return value of this function *must* be an
object. If the `selector` argument is omitted or falsey, a default
implementation will be provided.
* `viewportProps` – Any number of additional arguments may be provided to
explicitly name the viewport properties that the wrapped Component is
interested in. The following values have meaning:
* `'top'`
* `'right'`
* `'bottom'`
* `'left'`
* `'height'`
* `'width'`
* `'any'`
If no properties are named, `'any'` is implicitly assumed.
## Advantages
* Scroll and resize events are throttled to once per animation frame.
* Only one DOM event subscription per event.
## Disadvantages
* Currently only works with ReactDOM.
* Currently only works at the `window` level.
[HOC]: https://facebook.github.io/react/docs/higher-order-components.html