Notoriously Psychedelic Modules

    @react-native-community/hooks
    TypeScript icon, indicating that this package has built-in type declarations

    2.8.1 • Public • Published

    React Native Hooks

    React Native Hooks

    Version

    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
    })

    useCameraRoll

    import { useCameraRoll } from '@react-native-community/hooks'
    
    const [photos, getPhotos, saveToCameraRoll] = useCameraRoll()
    
    {
      photos.map((photo, index) => /* render photos */)
    }
    
    <Button title='Get Photos' onPress={() => getPhotos()}>Get Photos</Button>

    useClipboard

    import { useClipboard } from '@react-native-community/hooks'
    
    const [data, setString] = useClipboard()
    
    <Text>{data}</Text>
    
    <Button title='Update Clipboard' onPress={() => setString('new clipboard data')}>Set Clipboard</Button>

    useDimensions

    Gets dimensions and sets up a listener that will change the dimensions if the user changes device orientation.

    import { useDimensions } from '@react-native-community/hooks'
    
    const dimensions = useDimensions()
    // or
    const { width, height } = useDimensions().window
    // or
    const screen = useDimensions().screen

    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('is orientation portrait: ', orientation.portrait)
    console.log('is orientation landscape: ', orientation.landscape)

    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}} />

    Thanks

    We use auto for automatic releases, an awesome tool by an awesome dude!

    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!

    Keywords

    none

    Install

    npm i @react-native-community/hooks

    DownloadsWeekly Downloads

    62,624

    Version

    2.8.1

    License

    ISC

    Unpacked Size

    88.3 kB

    Total Files

    52

    Last publish

    Collaborators

    • pvinis