Android | IOS | Web (react-native-web) |
Expo |
---|---|---|---|
✅ | ✅ | ✅ | ✅ |
Inspired by: react-native-viewport-units and react-native-expo-viewport-units
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
- Using dynamical hooks: CodeSandbox Example ☁️
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
🌊 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());
}
MIT - This module was built with ❤️ by Luffos
Feel free for modify, edit, copy, fork and share