🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP
Sign In

react-native-use-hooks

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-use-hooks - npm Package Compare versions

Comparing version
0.0.6
to
0.0.7
+3
dist/useTriggerTimer/index.d.ts
type UseTriggerTimerType = [boolean, () => void];
export declare function useTriggerTimer(time?: number): UseTriggerTimerType;
export {};
import { useState, useEffect } from 'react';
export function useTriggerTimer(time) {
const [status, setStatus] = useState(false);
const trigger = () => {
if (typeof time === 'number') {
setStatus(true);
}
};
useEffect(() => {
let timer;
if (status && typeof time === 'number') {
timer = setTimeout(() => {
setStatus(false);
}, time);
}
return () => clearTimeout(timer);
}, [status, time]);
return [status, trigger];
}
+1
-0
export * from './useOrientation';
export * from './getScaledSize';
export * from './useTriggerTimer';
export * from './useOrientation';
export * from './getScaledSize';
export * from './useTriggerTimer';
+1
-1
{
"name": "react-native-use-hooks",
"version": "0.0.6",
"version": "0.0.7",
"description": "A library of useful React Native hooks.",

@@ -5,0 +5,0 @@ "main": "./dist/index.js",

+34
-17
# React Native Use Hooks
...and some utility functions.
>This library is under development, use with caution. More useful hooks coming soon
> This library is under development, use with caution. More useful hooks coming soon

@@ -18,9 +19,9 @@ ## Import

<View>
{orientation === 'landscape' ? (
<Text>This content is displayed only in landscape orientation.</Text>
) : (
<Text>This content is displayed in portrait orientation.</Text>
)}
</View>
<View>
{orientation === 'landscape' ? (
<Text>This content is displayed only in landscape orientation.</Text>
) : (
<Text>This content is displayed in portrait orientation.</Text>
)}
</View>

@@ -31,3 +32,3 @@ ## getScaledSize function

**Basic usage**
**Basic usage**

@@ -38,4 +39,4 @@ const scale = getScaledSize();

<Text style={{ fontSize: scale(20) }}>
This text will have a scaled font size of 20 units.
<Text style={{ fontSize: scale(20) }}>
This text will have a scaled font size of 20 units.
</Text>

@@ -46,10 +47,26 @@

const scale = getScaledSize({size: 20, factor: 0.5, baseWidth: 400});
In this example, the `getScaledSize` function is called with specific options provided as an argument. However, if the options parameter is not provided, the function will still work and use the default values for size, factor, and baseWidth.
- `size: 20`: This option sets the base font size to 20 units. It represents the size that will be scaled based on the device's screen dimensions and pixel density.
- `factor: 0.5`: This option determines the scaling factor that will be applied to the base size. In this case, a factor of 0.5 is provided, indicating that the scaled size will be reduced by 50% of the difference between the base size and the calculated size based on the screen dimensions.
- `baseWidth: 400`: This option specifies the base width against which the screen dimensions will be compared. It determines the reference width for the scaling calculation.
In this example, the `getScaledSize` function is called with specific options provided as an argument. However, if the options parameter is not provided, the function will still work and use the default values for size, factor, and baseWidth.
- `size: 20`: This option sets the base font size to 20 units. It represents the size that will be scaled based on the device's screen dimensions and pixel density.
- `factor: 0.5`: This option determines the scaling factor that will be applied to the base size. In this case, a factor of 0.5 is provided, indicating that the scaled size will be reduced by 50% of the difference between the base size and the calculated size based on the screen dimensions.
- `baseWidth: 400`: This option specifies the base width against which the screen dimensions will be compared. It determines the reference width for the scaling calculation.
## useTriggerTimer hook
This hook allows you to set a timer and trigger its execution. It returns a tuple containing a boolean value representing the current status of the timer and a function to trigger the timer.
If no time value is provided, the timer functionality will not be triggered. Instead, the `status` value will always be `false`, indicating that the timer is inactive.
This hook can be very suitable for displaying tooltips and toasts
**Usage**
const [status, trigger] = useTriggerTimer(5000);
return (
<>
<button onClick={trigger}>Trigger Timer</button>
{status ? <p>Timer is active.</p> : <p>Timer is inactive.</p>}
</>
)