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: about 2 months 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-07-27T16:45:19.929Z (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: 38
• 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