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 LuffosFeel free for modify, edit, copy, fork and share