Two decorators (higher order components) that inject 'window' scroll position, dimensions, orientation and breakpoint to your component's props.
npm install react-window-decorators
Two decorators (higher order components) that inject window scroll position,
dimensions, orientation, breakpoint* and isTouchDevice to your component's props.
If you are not sure what it does, play with the
demo.
All modern browsers and IE10+.
\* You need to pass breakpoint data (check below).
Library is made as ES module, and you should use it with a module bundler (tested with webpack).
Using decorator syntax (my preferred way).
``js
import { withScroll } from 'react-window-decorators';
@withScroll
export default class YourComponent extends Component {
render() {
return (
Or without decorator syntax
js
import { withScroll } from 'react-window-decorators';class YourComponent extends Component {
render() {
return (
Vertical scroll position is: { this.props.scrollPositionY }
);
}
}export default withScroll(YourComponent);
`
If you run it on the server,
will return 0 as the initial value.$3
withWindow internally uses WindowManager for tracking resize events.
If you want to use breakpoints feature you need to set it by creating new WindowManager
and passing it array with breakpoints data. Each breakpoint object must contain
a name and media query which will be passed to
matchMedia.Second argument is
which determines resize event's debounce time.
Default is 250.WindowManager is a singleton, so this should be done only once before using decorator.`js
import { WindowManager } from 'react-window-decorators';// Example breakpoints data
const BREAKPOINTS = [
{
name: 'small',
media: '(min-width: 0)',
},
{
name: 'medium',
media: '(min-width: 600px)',
},
];
// Set breakpoints data
// Somewhere in your application bootstrap
new WindowManager(BREAKPOINTS);
`If you don't pass breakpoints data,
prop will always be null.Using decorator syntax (my preferred way).
`js
import { withWindow } from 'react-window-decorators';@withWindow
export default class YourComponent extends Component {
render() {
return (
Window dimensions are: { this.props.dimensions.width }/{ this.props.dimensions.height }
Window orientation is: { this.props.orientation }
Window breakpoint is: { this.props.breakpoint }
Device is touch enabled: { this.props.isTouchDevice.toString() }
);
}
}
`Or without decorator syntax
js
import { withWindow } from 'react-window-decorators';class YourComponent extends Component {
render() {
return (
Window dimensions are: { this.props.dimensions.width }/{ this.props.dimensions.height }
Window orientation is: { this.props.orientation }
Window breakpoint is: { this.props.breakpoint }
Device is touch enabled: { this.props.isTouchDevice.toString() }
);
}
}export default withWindow(YourComponent);
`If you run it on the server,
will return these initial values`js
{
dimensions: {
width: 0,
height: 0,
},
breakpoint: null,
orientation: null,
isTouchDevice: false,
};
`Chaining Decorators
js
@withWindow
@withScroll
export default class YourComponent extends Component {
...
}
`or
js
class YourComponent extends Component {
...
}export default withWindow(withScroll(Demo));
``Released under MIT License.