Luffos/rxn-units

📐 Cross-Platform Viewport Units (vw, vh, vmin, vmax, percentage) + useUnits hook for React Native, React Native Web and Expo.

‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎

---

Support:

Android	IOS	Web (react-native-web)	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 ☁️

Units (vw, vh, vmin, vmax and percentage)

What is vw? (viewport width)
The vw measurement is equal to 1/100 of the viewport width.
Example: If the browser width is 900px, vw(1) equals 9px.

What is vh? (viewport height)
The vh measurement is equal to 1/100 of the viewport height.
Example: If the browser height is 500px, vh(1) equals 5px.

What is vmin and vmax?

• vmax(n) means "Which is the larger between vw(n) and vh(n)?" = vw(n) or vh(n)
• vmin(n) means "Which is the lower between vw(n) and vh(n)?" = vw(n) or vh(n)

Percentage
percentage(x, y) = X% of Y

Usage

🌊 Using via hook (dynamically changes)

import React from 'react';
import useUnits from 'rxn-units';
    
const Foo = () => {
  const {vmin, vmax, vw, vh, percentage} = useUnits();

  . . .
}

📌 Using static methods (need manual recall every time)

import React from 'react';
import {vmin, vmax, vw, vh, percentage} from 'rxn-units';
    
const Foo = () => {
  console.log("current vmin", vmin());
  console.log("current vmax", vmax());
}

Contributors

📄 License

MIT - This module was built with ❤️ by Luffos
Feel free for modify, edit, copy, fork and share