Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Luffos/rxn-units
📐 Cross-Platform Viewport Units (vw, vh, vmin, vmax, percentage) + useUnits hook for React Native, React Native Web and Expo.
https://github.com/Luffos/rxn-units
expo react react-native react-native-web reactjs rxn typescript units vh viewport viewport-size viewport-units vmax vmin vw xplat
Last synced: 6 days ago
JSON representation
📐 Cross-Platform Viewport Units (vw, vh, vmin, vmax, percentage) + useUnits hook for React Native, React Native Web and Expo.
- Host: GitHub
- URL: https://github.com/Luffos/rxn-units
- Owner: Luffos
- License: mit
- Created: 2022-04-04T18:57:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-17T19:00:30.000Z (over 1 year ago)
- Last Synced: 2024-09-26T18:19:05.221Z (about 2 months ago)
- Topics: expo, react, react-native, react-native-web, reactjs, rxn, typescript, units, vh, viewport, viewport-size, viewport-units, vmax, vmin, vw, xplat
- Language: TypeScript
- Homepage:
- Size: 64.5 KB
- Stars: 40
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---------------------------------------------
## Support:
| Android | IOS | Web
(react-native-web) | Expo |
|:-------:|:---:|:----------------------------:|:------:|
| ✅ | ✅ | ✅ | ✅ |
Inspired by: [react-native-viewport-units](https://github.com/jmstout/react-native-viewport-units) and [react-native-expo-viewport-units](https://github.com/joetakara/react-native-expo-viewport-units)
## Install
Using NPM
```sh
npm install rxn-units
```
Using Yarn
```sh
yarn add rxn-units
```
🌐 Using this module for Web?
Don't forget to setup [react-native-web](https://github.com/necolas/react-native-web)
## Examples
- Using dynamical hooks: [CodeSandbox Example ☁️](https://codesandbox.io/s/rxn-units-example-ox6n4h)
## 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)
```typescript
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)
```typescript
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](https://github.com/Luffos)
Feel free for modify, edit, copy, fork and share