npm package: @lumitech/mobile-hooks
Description: test
Latest version: 0.5.0

## 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

```sh
npm install @lumitech/mobile-hooks
```

## API
- [useAppStateEvent](https://github.com/lumitech-software/react-native-hooks#useappstateevent)
- [useBackHandler](https://github.com/lumitech-software/react-native-hooks#usebackhandler)
- [useDeviceOrientation](https://github.com/lumitech-software/react-native-hooks#usedebiveorientation)
- [useDimensions](https://github.com/lumitech-software/react-native-hooks#usedimentions)
- [useInterval](https://github.com/lumitech-software/react-native-hooks#useinterval)
- [useLayout](https://github.com/lumitech-software/react-native-hooks#uselayout)
- [useKeyboard](https://github.com/lumitech-software/react-native-hooks#useKeyboard)
- [useDebounce](https://github.com/lumitech-software/react-native-hooks#useDebounce)
- [useTimeout](https://github.com/lumitech-software/react-native-hooks#useTimeout)
- [useThrottle](https://github.com/lumitech-software/react-native-hooks#useThrottle)

### `useAppStateEvent`
```js
import { useAppStateEvent } from '@lumitech/mobile-hooks'

const [appState, setAppState] = useState('active');

useAppStateEvent({
  onChange: () => console.log(appState),
  onForeground: () => setAppState('active'),
  onBackground: () => setAppState('background'),
})
```

### `useBackHandler`
```js
import { useBackHandler } from '@lumitech/mobile-hooks'

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

### `useDeviceOrientation`
```js
import { useDeviceOrientation } from '@lumitech/mobile-hooks'

const orientation = useDeviceOrientation()

console.log('is orientation portrait: ', orientation.portrait)
console.log('is orientation landscape: ', orientation.landscape)
```

### `useDimensions`
```js
import { useScreenDimensions, useWindowDimensions } from '@lumitech/mobile-hooks'

const { width, height } = useScreenDimensions()
// or
const { width, height } = useWindowDimensions()
```

### `useInterval`
```js
import { useInterval } from '@lumitech/mobile-hooks'

const [count, setCount] = useState(0)

useInterval(() => setCount(count + 1), 1000)
```

### `useLayout`
```js
import { useLayout } from '@lumitech/mobile-hooks'

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

console.log('layout: ', layout)

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

### `useKeyboard`
```js
import { useKeyboard } from '@lumitech/mobile-hooks'

const { keyboardShown, coordinates, keyboardHeight } = useKeyboard()

console.log('keyboard: ', { keyboardShown, coordinates, keyboardHeight })

```

### `useDebounce`
```js
import { useDebounce } from '@lumitech/mobile-hooks'

const [searchTerm, setSearchTerm] = useState("");

const debouncedSearchTerm = useDebounce(searchTerm, 500);

```

### `useTimeout`
```js
import { useTimeout } from '@lumitech/mobile-hooks'

const [count, setCount] = useState(0)

useTimeout(() => setCount(count + 1), 1000)
```

### `useThrottle`
```js
import { useThrottle } from '@lumitech/mobile-hooks'

const [searchTerm, setSearchTerm] = useState("");

const throttledSearchTerm = useThrottle(searchTerm, 500);

```