You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-screen-orientation

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-screen-orientation

Display Components based on screen orientation


Version published
Weekly downloads
639
decreased by-14.23%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

react-screen-orientation

Installation

npm install react-screen-orientation --save

Usage

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>
    )
  }
}

Documentation

DeviceOrientation

childrenOrientation

Required. You MUST supply children of type Orientation. Each child will only be visible if it's orientation prop matches the current screen orientation.

classNameString ('')

Passes CSS classes to the underlying div.

lockOrientationString 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.

onLockOrientationfunction (success) (undefined)

Callback which will be called after trying to lock screen orientation using lockOrientation.

onOrientationChangefunction (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:

  • orientationportrait or landscape
  • typeprimary or secondary
  • angle0, 90, 180 or 270

Orientation

alwaysRenderboolean (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.

classNameString ('')

Passes CSS classes to the underlying div.

orientationString (undefined)

Required Supply either portrait or landscape to indicate when the component should be visible.

Keywords

FAQs

Package last updated on 14 Aug 2019

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc