‚̧Noteworthy Programming Masterpiece
    Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    react-native-use-dimensions
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.4¬†‚Äʬ†Public¬†‚Äʬ†Published
    react-native-use-dimensions

    npm version downloads build status license

    Description

    This Node.js package is a collection of React hooks for using the dimensions of the screen, window, or both.

    Installation

    With Node.js installed, simply run the following command to add the package to your project.

    npm install react-native-use-dimensions

    Usage

    Check out the examples below or check out the docs.

    The package comes with three hooks:

    1. useScreenDimensions - screen dimensions
    2. useWindowDimensions - window dimensions, which can be separate from screen on Android
    3. useDimensions - screen and window dimensions
    import React from "react";
    import { Text } from "react-native";
    import useDimensions, {
      useScreenDimensions,
      useWindowDimensions
    } from "react-native-use-dimensions";
     
    const ScreenDimensions = () => {
      const { height, width } = useScreenDimensions();
      const isLandscape = width > height;
      return (
        <Text>
          {width}x{height}
          Orientation: {isLandscape ? "Landscape" : "Portrait"}
        </Text>
      );
    };
     
    const WindowDimensions = () => {
      const { height, width } = useWindowDimensions();
      const isLandscape = width > height;
      return (
        <Text>
          {width}x{height}
          Orientation: {isLandscape ? "Landscape" : "Portrait"}
        </Text>
      );
    };
     
    const BothDimensions = () => {
      const { screen, window } = useDimensions();
      return (
        <Text>
          Screen: {screen.width}x{screen.height}
          Window: {window.width}x{window.height}
        </Text>
      );
    };

    License

    This software is released under the terms of MIT license.

    Install

    npm i react-native-use-dimensions

    DownloadsWeekly Downloads

    20

    Version

    1.3.4

    License

    MIT

    Unpacked Size

    8.41 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar