Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
react-window-decorators
Advanced tools
Two decorators (higher order components) that inject 'window' scroll position, dimensions, orientation and breakpoint to your component's props.
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).
withScroll
decoratorUsing decorator syntax (my preferred way).
import { withScroll } from 'react-window-decorators';
@withScroll
export default class YourComponent extends Component {
render() {
return (
<div>
Vertical scroll position is: { this.props.scrollPositionY }
</div>
);
}
}
Or without decorator syntax
import { withScroll } from 'react-window-decorators';
class YourComponent extends Component {
render() {
return (
<div>
Vertical scroll position is: { this.props.scrollPositionY }
</div>
);
}
}
export default withScroll(YourComponent);
If you run it on the server, withScroll
will return 0
as the initial value.
withWindow
decoratorwithWindow
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 debounceTime
which determines resize event's debounce time.
Default is 250
.
WindowManager
is a singleton, so this should be done only once before using decorator.
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, breakpoint
prop will always be null.
Using decorator syntax (my preferred way).
import { withWindow } from 'react-window-decorators';
@withWindow
export default class YourComponent extends Component {
render() {
return (
<div>
<div>Window dimensions are: { this.props.dimensions.width }/{ this.props.dimensions.height }</div>
<div>Window orientation is: { this.props.orientation }</div>
<div>Window breakpoint is: { this.props.breakpoint }</div>
<div>Device is touch enabled: { this.props.isTouchDevice.toString() }</div>
</div>
);
}
}
Or without decorator syntax
import { withWindow } from 'react-window-decorators';
class YourComponent extends Component {
render() {
return (
<div>
<div>Window dimensions are: { this.props.dimensions.width }/{ this.props.dimensions.height }</div>
<div>Window orientation is: { this.props.orientation }</div>
<div>Window breakpoint is: { this.props.breakpoint }</div>
<div>Device is touch enabled: { this.props.isTouchDevice.toString() }</div>
</div>
);
}
}
export default withWindow(YourComponent);
If you run it on the server, withWindow
will return these initial values
{
dimensions: {
width: 0,
height: 0,
},
breakpoint: null,
orientation: null,
isTouchDevice: false,
};
@withWindow
@withScroll
export default class YourComponent extends Component {
...
}
or
class YourComponent extends Component {
...
}
export default withWindow(withScroll(Demo));
Released under MIT License.
v1.0.8
05.10.2022.
Changed
FAQs
Two decorators (higher order components) that inject 'window' scroll position, dimensions, orientation and breakpoint to your component's props.
The npm package react-window-decorators receives a total of 253 weekly downloads. As such, react-window-decorators popularity was classified as not popular.
We found that react-window-decorators demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.