React Native Hooks

React Native APIs turned into React Hooks allowing you to access asynchronous APIs directly in your functional components.

Note: You must use React Native >= 0.59.0

Installation with npm

npm install @react-native-community/hooks

Installation with yarn

yarn add @react-native-community/hooks

API

`useAccessibilityInfo`

import {useAccessibilityInfo} from '@react-native-community/hooks'

const {
  boldTextEnabled,
  screenReaderEnabled,
  reduceMotionEnabled, // requires RN60 or newer
  grayscaleEnabled, // requires RN60 or newer
  invertColorsEnabled, // requires RN60 or newer
  reduceTransparencyEnabled, // requires RN60 or newer
} = useAccessibilityInfo()

`useAppState`

AppState will change between one of 'active', 'background', or (iOS) 'inactive' when the app is closed or put into the background.

import {useAppState} from '@react-native-community/hooks'

const currentAppState = useAppState()

`useBackHandler`

import {useBackHandler} from '@react-native-community/hooks'

useBackHandler(() => {
  if (shouldBeHandledHere) {
    // handle it
    return true
  }
  // let the default thing happen
  return false
},[shouldBeHandledHere])

`useImageDimensions`

import {useImageDimensions} from '@react-native-community/hooks'

const source = require('./assets/yourImage.png')
// or
const source = {uri: 'https://your.image.URI'}

const {dimensions, loading, error} = useImageDimensions(source)

if (loading || error || !dimensions) {
  return null
}
const {width, height, aspectRatio} = dimensions

`useKeyboard`

import {useKeyboard} from '@react-native-community/hooks'

const keyboard = useKeyboard()

console.log('keyboard isKeyboardShow: ', keyboard.keyboardShown)
console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)

`useInteractionManager`

import {useInteractionManager} from '@react-native-community/hooks'

const interactionReady = useInteractionManager()

console.log('interaction ready: ', interactionReady)

`useDeviceOrientation`

import {useDeviceOrientation} from '@react-native-community/hooks'

const orientation = useDeviceOrientation()

console.log('orientation is:', orientation)

`useLayout`

import { useLayout } from '@react-native-community/hooks'

const { onLayout, ...layout } = useLayout()

console.log('layout: ', layout)

<View onLayout={onLayout} style={{width: 200, height: 200, marginTop: 30}} />

`useRefresh`

import {useRefresh} from '@react-native-community/hooks'

const fetch = () => {
  return new Promise((resolve) => setTimeout(resolve, 500))
}

const {isRefreshing, onRefresh} = useRefresh(fetch)

;<ScrollView
  refreshControl={
    <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />
  }
/>

Thanks

We use Changesets for managing releases and versioning.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Pavlos Vinieratos} 💻 🎨 📖 🚇 🚧 ⚠️	_Melih 💻 📖 🚇 ⚠️	_{Jesse Katsumata} 💻 📖 🚧 ⚠️	_{abhishek gupta} 🐛	_Zeljko 💻	_{Linus Unnebäck} 💻 🚇 📖 ⚠️	_{Tony Xiao} 💻
_{Ronaldo Lima} 💻	_{Marius Reimer} 💻	_{Nishith Patel} 💻	_jozn 📖	_{Andrew Lisowski} 🚇 📦 🔧 💻 📖	_{faraz ahmad} 📖	_{Nader Dabit} 🤔
_{Dani Akash} 💻	_{Dylan Vann} 💻	_{Tihomir Valkanov} 📖	_{Pierre Skowron} 💻	_{Gamal Shaban} 💻 📖 ⚠️	_Greg-Bush 📖 💻 ⚠️ 🚇	_{Alan Kenyon} 📖 💻
_{Thibault Maekelbergh} ⚠️ 💻	_{Gertjan Reynaert} ⚠️ 💻	_{David NRB} ⚠️ 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

License

50lo/hooks

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages