Skip to content

Commit

Permalink
docs: add README.MD Description
Browse files Browse the repository at this point in the history
  • Loading branch information
kdn0325 committed Mar 11, 2024
1 parent b9f4334 commit 3580fcb
Showing 1 changed file with 71 additions and 4 deletions.
75 changes: 71 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,87 @@

react-native-dimensions-util

- As a React Native developer, we need to determine the size of components with different display sizes for each device using the app
- Usually, when collaborating using Figma, calculating is annoying and there is a possibility of making mistakes. Even if it is modularized, it can be inaccurate sometimes. It is also difficult to cope with foldable phones or horizontal modes. And some components don't work with percentage
- The best recommendation is using `useWindowDimension` Hooks

## Installation

```sh
npm install react-native-dimensions-util
# or
yarn add react-native-dimensions-util
```

## Usage

```js
import { multiply } from 'react-native-dimensions-util';

// ...
### widthPercentage(width: number): number
Calculates the percentage value of the width relative to the screen width.

```javascript
import { widthPercentage } from 'react-native-dimensions-util';

const screenWidth = 200; // Current screen width
const widthInPercentage = widthPercentage(screenWidth);
console.log(widthInPercentage); // Percentage value of the screen width
```

heightPercentage(height: number): number
Calculates the percentage value of the height relative to the screen height.



### heightPercentage(height: number): number
Calculates the percentage value of the height relative to the screen height.

```javascript
import { heightPercentage } from 'react-native-dimensions-util';
const screenHeight = 400; // Current screen height
const heightInPercentage = heightPercentage(screenHeight);
console.log(heightInPercentage); // Percentage value of the screen height
```

### fontPercentage(size: number): number
Calculates the percentage value of the font size

```javascript
import { fontPercentage } from 'react-native-dimensions-util';
const fontSize = 20; // Font size
const fontSizeInPercentage = fontPercentage(fontSize);
console.log(fontSizeInPercentage); // Percentage value of the font size
```


### horizontalScale(value: number): number
Scales the value provided based on the horizontal size of the screen.

```javascript
import { fontPercentage } from 'react-native-dimensions-util';
const fontSize = 20; // Font size
const fontSizeInPercentage = fontPercentage(fontSize);
console.log(fontSizeInPercentage); // Percentage value of the font size
```

### verticalScale(value: number): number
Scales the value provided based on the horizontal size of the screen.

```javascript
import { horizontalScale, verticalScale } from 'react-native-dimensions-util';
const widthValue = 100; // Value to scale horizontally
const heightValue = 100; // Value to scale vertically
const scaledWidth = horizontalScale(widthValue);
const scaledHeight = verticalScale(heightValue);
console.log(scaledWidth); // Scaled width value
console.log(scaledHeight); // Scaled height value
const result = await multiply(3, 7);
```

## Contributing
Expand Down

0 comments on commit 3580fcb

Please sign in to comment.