Viewport units (vw, vh, vmin, vmax) + useUnits hook for React, React Native and Expo

Viewport units (vw, vh, vmin, vmax) + useUnits hookfor React, React Native and Expo.

Inspired by: react-native-viewport-units and react-native-expo-viewport-units

Install

Using NPM

npm install rxn-units

Using Yarn

yarn add rxn-units

? Using this module for Web?Don’t forget to setup react-native-web

Examples

• Using dynamical hooks: CodeSandbox Example ☁️

Usage

Using via hook (dynamically changes)

import React from 'react';
import useUnits from 'rxn-units';

const Test = () => {
  const {vmin, vmax, vw, vh} = useUnits();

  . . .
}

Using static methods (Need manual recall every time)

import React from 'react';
import {vmin, vmax, vw, vh} from 'rxn-units';

const handleClick = () => {
    console.log("current vmin", vmin());
    console.log("current vmax", vmax());
}

. . .

Contributors

License

MIT – This module was built with ❤️ by LuffosFeel free for modify, edit, copy, fork and share

GitHub

View Github