Outstanding set of the most powerful React Hooks!
NPM:
npm install react-native-hookboxYarn:
yarn add react-native-hookboxDetects the current state of the app through the AppState API from ReactNativeCore. The current app states: "active" | "background" | "inactive" | "unknown" | "extension"
import { useAppState } from 'react-native-hookbox';
// ...
const appState = useAppState();
useEffect(() => {
if (appState === 'active') {
// ...
}
}, [appState]);Async wrapper for async/await functions with Promise return.
// file1 (API or something)
const someAsyncFn = async () => 'async data';
// file2 (Component)
import { useAsync } from 'react-native-hookbox';
// ...
const { data, error, isLoading } = useAsync(someAsyncFn);
useEffect(() => {
console.log('new data:', data);
}, [data]);
useEffect(() => {
console.log('error:', error);
}, [error]);
// usage of 'isLoading' if you needReturns the cached non-empty value of the current value.
Do not consider any null, undefined and NaN values (or similar).
import { useCached } from 'react-native-hookbox';
// ...
const [state, setState] = useState(0);
const cachedState = useCached(state);
// state: 0, cachedState: 0
// state: 1, cachedState: 1,
// state: 2, cachedState: 2,
// state: undefined, cachedState: 2,
// state: null, cachedState 2,
// state: 10, cachedState: 10,
// state: 11, cachedState: 11,
// ...Makes the countdown with some interval (step). Calls onEnd function if it exists at the end.
Provides timeLeft, isPaused fields and setNewRemainingTime, resetCountdown, pauseCountdown, resumeCountdown methods for countdown manipulation.
import { useCountdown } from 'react-native-hookbox';
// ...
// The coundown will be updated each 500ms. 60000 -> 59500 -> 59000 -> 58500 -> ... -> 500 -> 0
// The `onTick` console.log will output 'tick 59500' -> 'tick 59000' -> 'tick 58500' ... -> 'tick 500'
// The console.log will output 'finish' when the `timeLeft` will be equal to 0.
const {
timeLeft,
isPaused,
setNewRemainingTime,
resetCountdown,
pauseCountdown,
resumeCountdown,
} = useCountdown({
initialRemainingTimeMs: 60000,
onTick: (currentTimeLeft: number) => console.log('tick', currentTimeLeft),
onEnd: () => console.log('finish'),
countdownStepMs: 500,
});
// timeLeft will be equal 60000 after this call.
const onSetNewRemainingTime = () => {
setNewRemainingTime(60000);
};
// `resetCountdown` will reset `timeLeft` to 0 and pause the timer.
// `pauseCountdown` will pause the countdown and provide the updated value with `isPaused`
// `resumeCountdown` will resume the countdown and provide the updated value with `isPaused`A bit delayed value of the state. If the state changes, the timer is reset.
import { useDebouncedValue } from 'react-native-hookbox';
// ...
const [state, setState] = useState(0);
const debouncedState = useDebouncedValue(state, 1000);
// ...useEffect with deep comparison of dependencies instead of shalow comparison by the default.
import { useDeepCompareEffect } from 'react-native-hookbox';
// ...
const [state, setState] = useState({ name: 'John' });
// ...
useDeepCompareEffect(() => {
console.log('state has been updated (even if not a link for object)');
}, [state]);
// ...
// The same link for object, but another properties inside
setState((prev) => {
prev.name = 'Roman';
return prev;
});
// It will trigger the deepCompareEffect aboveDetects the current orientation of the device.
import { useDeviceOrientation } from 'react-native-hookbox';
// ...
const orientation = useDeviceOrientation();
useEffect(() => {
if (orientation === 'portrait') {
// Portrait mode
// ...
} else {
// Landscape mode
// ...
}
}, [orientation]);Fetch data from an API
import { useFetch } from 'react-native-hookbox';
// ...
const MyComponent = () => {
const [data, loading, error] = useFetch(
'https://jsonplaceholder.typicode.com/todos/1',
{}
);
// ...
};A hook that returns the current keyboard height in pixels when the keyboard is visible, allowing responsive UI adjustments.
import { useKeyboardHeight } from 'react-native-hookbox';
// ...
const MyComponent = () => {
const keyboardHeight = useKeyboardHeight();
return (
<View style={{ paddingBottom: keyboardHeight }}>
<TextInput placeholder="Type here..." />
</View>
);
};import { useKeyboardListeners } from 'react-native-hookbox';
// ...
const onKeyboardShow = useCallback(() => {
// ...
}, []);
const onKeyboardHide = useCallback(() => {
// ...
}, []);
useKeyboardListeners(onKeyboardShow, onKeyboardHide);useEffect with an empty dependency array.
import { useMount } from 'react-native-hookbox';
// ...
useMount(() => {
console.log('component has been mounted');
});Returns the previous value in the previous render iteration.
import { usePrevious } from 'react-native-hookbox';
// ...
const [state, setState] = useState(0);
const prevState = usePrevious(state);
// state: 0, prevState: undefined
// state: 1, prevState: 0,
// state: 2, prevState: 1,
// state: 0, prevState: 2,
// ...import { useSpecificKeyExtractor } from 'react-native-hookbox';
// ...
// 'some-data-element' is a just prefix for a convenient debugging when you check nodes in React DevTools
// 'id' should be included in 'SomeDataType'
const keyExtractor = useSpecificKeyExtractor<SomeDataType>(
'some-data-element',
'id'
);
return (
<FlatList data={data} keyExtractor={keyExtractor} renderItem={renderItem} />
);
// ...Combines useState and useCached hooks.
import { useStateWithCached } from 'react-native-hookbox';
// ...
const [state, setState, cachedState] = useStateWithCached(0);
// state: 0, cachedState: 0
// state: 1, cachedState: 1,
// state: 2, cachedState: 2,
// state: null, cachedState: 2,
// state: 4, cachedState: 4,
// state: undefined, cachedState: 4,
// state: 6, cachedState: 6,
// state: 7, cachedState: 7,Combines useState and usePrevious hooks.
import { useStateWithPrevious } from 'react-native-hookbox';
// ...
const [state, setState, prevState] = useStateWithPrevious(0);
// state: 0, prevState: undefined
// state: 1, prevState: 0,
// state: 2, prevState: 1,
// state: 0, prevState: 2,Validate the state value when it updates and return the boolean value of passed / failed validation as third param of the output array.
export { useStateWithValidation } from 'react-native-hookbox';
// ...
const [state, setState, isValid] = useStateWithValidation(
0,
(value) => value > 0
);
// state: 0, isValid: false
// setState(1)
// state: 1, isValid: true,
// setState(-1)
// state: -1, isValid: false,
// setState(10)
// state: 10, isValid: true,Extended useState for boolean values.
Return [value, toggleValue] array.
import { useToggle } from 'react-native-hookbox';
// ...
const [value, toggleValue] = useToggle(false);
// ...
const onPress = () => {
toggleValue();
};
// onPress() -> value: true
// onPress() -> value: false
// onPress() -> value: true
// ...useEffect that does not run on the first render.
import { useUpdateEffect } from 'react-native-hookbox';
// ...
const [counter, setCounter] = useState(0);
// only after new value appears
// shouldn't be called with counter === 0
useUpdateEffect(() => {
console.log('counter has been updated');
}, [counter]);
// setCounter(1) -> 'counter has been updated' in the consoleVibrate the device.
import { useVibration } from 'react-native-hookbox';
// ...
const { vibrate, cancelVibration } = useVibration();
const SomeComponent = () => {
const { vibrate, cancelVibration } = useVibration();
const onVibratePress = () => {
// Vibrate for 500 milliseconds
vibrate(500);
};
return (
<View>
<TouchableOpacity onPress={onVibratePress}>
<Text>Vibrate Now</Text>
</TouchableOpacity>
<TouchableOpacity onPress={cancelVibration}>
<Text>Cancel Vibration</Text>
</TouchableOpacity>
</View>
);
};See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT