
Security News
/Research
Wallet-Draining npm Package Impersonates Nodemailer to Hijack Crypto Transactions
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
react-screen-orientation
Advanced tools
npm install react-screen-orientation --save
Also see the example.
@import "~react-screen-orientation/src/index";
import React, {Component} from 'react'
import DeviceOrientation, { Orientation } from 'react-screen-orientation'
class Example extends Component {
render () {
return (
<DeviceOrientation lockOrientation={'landscape'}>
{/* Will only be in DOM in landscape */}
<Orientation orientation='landscape' alwaysRender={false}>
<div>
<p>Only visible in landscape</p>
</div>
</Orientation>
{/* Will stay in DOM, but is only visible in portrait */}
<Orientation orientation='portrait'>
<div>
<p>Please rotate your device</p>
</div>
</Orientation>
</DeviceOrientation>
)
}
}
children
— Orientation
Required. You MUST supply children of type Orientation
. Each child will only be visible if it's orientation
prop matches the current screen orientation.
className
— String
(''
)Passes CSS classes to the underlying div
.
lockOrientation
— String
or Array
(undefined
)Try to lock the device using either The Screen Orientation API or screen.lockOrientation
.
Valid values are: portrait-primary
, portrait-secondary
, landscape-primary
, landscape-secondary
, portrait
, landscape
and default
. Multiple values are allowed.
onLockOrientation
— function (success)
(undefined
)Callback which will be called after trying to lock screen orientation using lockOrientation
.
onOrientationChange
— function (orientation, type, angle)
(undefined
)Will be called in componentWillMount
and when screen orientation changes are detected. Orientation changes are detected using The Screen Orientation API or window.onorientationchange
window.screen.orientation.type
is split into orientation
and type
parameters.
Parameters:
orientation
— portrait
or landscape
type
— primary
or secondary
angle
— 0
, 90
, 180
or 270
alwaysRender
— boolean
(true
)Set this to false
to not render the component into the DOM if orientation
does not match the current screen orientation. This can be helpful if you need your component to re-render when screen orientation changes.
children
Any children will be passed to the DOM.
className
— String
(''
)Passes CSS classes to the underlying div
.
orientation
— String
(undefined
)Required Supply either portrait
or landscape
to indicate when the component should be visible.
FAQs
Display Components based on screen orientation
We found that react-screen-orientation 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.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.