Skip to content

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

License

Notifications You must be signed in to change notification settings

Luffos/rxn-units

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

87 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation



GitHub β€Ž β€Ž GitHub issues β€Ž β€Ž GitHub code size in bytes β€Ž β€Ž GitHub last commit (branch) β€Ž β€Ž GitHub package.json version β€Ž β€Ž npm


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

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