Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/react-native-community/hooks

React Native APIs turned into React Hooks for use in functional React components
https://github.com/react-native-community/hooks

Last synced: about 2 months ago
JSON representation

React Native APIs turned into React Hooks for use in functional React components

Host: GitHub
URL: https://github.com/react-native-community/hooks
Owner: react-native-community
License: isc
Created: 2018-10-27T23:23:49.000Z (almost 6 years ago)
Default Branch: main
Last Pushed: 2024-06-20T19:30:03.000Z (3 months ago)
Last Synced: 2024-06-25T05:05:27.649Z (3 months ago)
Language: TypeScript
Homepage:
Size: 2.21 MB
Stars: 3,404
Watchers: 38
Forks: 195
Open Issues: 39
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome - react-native-hooks - React Native APIs turned into React Hooks for use in functional React components (JavaScript)
awesome-list - hooks - native-community | 2463 | (TypeScript)

README

        ![React Native Hooks](reactnativehooks.jpg)

## React Native Hooks

[![Version][version-badge]][package]

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

```sh

npm install @react-native-community/hooks

```

Installation with yarn

```sh

yarn add @react-native-community/hooks

```

## API

- [useAccessibilityInfo](https://github.com/react-native-community/hooks#useaccessibilityinfo)

- [useAppState](https://github.com/react-native-community/hooks#useappstate)

- [useBackHandler](https://github.com/react-native-community/hooks#usebackhandler)

- [useImageDimensions](https://github.com/react-native-community/hooks#useImageDimensions)

- [useKeyboard](https://github.com/react-native-community/hooks#usekeyboard)

- [useInteractionManager](https://github.com/react-native-community/hooks#useinteractionmanager)

- [useDeviceOrientation](https://github.com/react-native-community/hooks#usedeviceorientation)

- [useLayout](https://github.com/react-native-community/hooks#uselayout)

- [useRefresh](https://github.com/react-native-community/hooks#useRefresh)

### `useAccessibilityInfo`

```js

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.

```js

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

const currentAppState = useAppState()

```

### `useBackHandler`

```js

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

useBackHandler(() => {

  if (shouldBeHandledHere) {

    // handle it

    return true

  }

  // let the default thing happen

  return false

})

```

### `useImageDimensions`

```js

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`

```js

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

const keyboard = useKeyboard()

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

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

```

### `useInteractionManager`

```js

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

const interactionReady = useInteractionManager()

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

```

### `useDeviceOrientation`

```js

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

const orientation = useDeviceOrientation()

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

```

### `useLayout`

```js

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

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

console.log('layout: ', layout)

```

### `useRefresh`

```js

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

const fetch = () => {

    return new Promise((resolve) => setTimeout(resolve, 500))

}

const { isRefreshing, onRefresh } = useRefresh(fetch);

  }

/>

```

[version-badge]: https://img.shields.io/npm/v/@react-native-community/hooks.svg?style=flat-square

[package]: https://www.npmjs.com/package/@react-native-community/hooks

## Thanks

We use [auto](https://github.com/intuit/auto) for automatic releases, an awesome tool by an awesome [dude](https://github.com/hipstersmoothie)!

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/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](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!