use-hook-kits/README.md

  

# Use Hook Kits

![npm](https://img.shields.io/npm/dt/use-hook-kits.svg)
![npm](https://img.shields.io/npm/v/use-hook-kits.svg)
![NpmLicense](https://img.shields.io/npm/l/use-hook-kits.svg)

**Use Hook Kits**
Read about [Hooks](https://reactjs.org/docs/hooks-intro.html) feature.

## Installation

> Note: React 16.8+ is required for Hooks.

### With npm

```sh
npm i use-hook-kits
```

### Or with yarn

```sh
yarn add use-hook-kits
```

## Usage

### useState

```js
import React from "react";
import { useState } from "use-hook-kits";

function App({ object, array }) {
  const [state, setState] = useState(0);

  const onCount = () => setState(state++, (nextState) => {// callback after change state})

  const onCountPrevState = () => setState(prev => prev++, (nextState) => {// callback after change state})

  return <View/>;
}

export default deepMemo(App);

```

### deepMemo

```js
import React from "react";
import { deepMemo } from "use-hook-kits";

function App({ object, array }) {
  return <View/>;
}
export default deepMemo(App);
```

### useMount

```js
import React from "react";
import { useMount } from "use-hook-kits";

function App({ object, array }) {
  useMount(() => {
    // do something significant here
  });

  return <View/>;
}
```

### useDidMount

```js
import React from "react";
import { useDidMount } from "use-hook-kits";

function App({ object, array }) {
  useDidMount(() => {
    // do something significant here
  });

  return <View/>;
}
```

### useDidUpdate

```js
import React from "react";
import { useDidUpdate } from "use-hook-kits";

function App({ object, array }) {
  useDidUpdate(() => {
    // do something significant here
  }, [object, array]);

  return <View/>;
}
```

### useDeepEffect

```js
import React from "react";
import { useDeepEffect } from "use-hook-kits";

function App({ object, array }) {
  useDeepEffect(() => {
    // do something significant here
    return () => {
      // return to clean up that significant thing
    };
  }, [object, array]);

  return <View/>;
}
```

### useDeepCallback

```js
import React from "react";
import { useDeepCallback } from "use-hook-kits";

function App({ object, array }) {
  const callback = useDeepCallback(() => {
    // do something significant here
  }, [object, array]);

  return <View/>;
}
```

### useDeepMemo

```js
import React from "react";
import { useDeepMemo } from "use-hook-kits";

function App({ object, array }) {
  const memoized = useDeepMemo(() => {
    // do something significant here
  }, [object, array]);

  return <View/>;
}
```

### useInterval

```js
import React from "react";
import { useInterval } from "use-hook-kits";

function App({ object, array }) {
   useInterval(() => {
    // do something significant here
  }, 1000, true);

  return <View/>;
}
```

### usePrevious

```js
import React from "react";
import { usePrevious } from "use-hook-kits";

function App() {
  // State value and setter for our example
  const [count, setCount] = React.useState(0);
  
  // Get the previous value (was passed into hook on last render)
  const prevCount = usePrevious(count);
  
  return <View/>;
}
```

### useDebounce

```js
import React from "react";
import { useDebounce } from "use-hook-kits";

function App() {
  // State value and setter for our example
  const [text, setText] = useState('Hello');
  //Debounce value
  const [value] = useDebounce(text, 1000);
  
  return <View/>;
}
```

### useDebounceCallback

```js
import React from "react";
import { useDebounceCallback } from "use-hook-kits";

function App({ object, array }) {
 const [value, setValue] = useState(defaultValue);
  // Debounce callback
  const [debouncedCallback] = useDebounceCallback(
    // function
    (value) => {
      setValue(value);
    },
    // delay in ms
    1000
  );

  return <TextInput defaultValue={defaultValue} onChangeText={(value) => debouncedCallback(value)} />;
}
```

### useThrottleCallback

```js
import React from "react";
import { useThrottleCallback } from "use-hook-kits";

function App({ object, array }) {
 const [value, setValue] = useState(defaultValue);
  // Debounce callback
  const [throttleCallback] = useThrottleCallback(
    // function
    (value) => {
      setValue(value);
    },
    // delay in ms
    1000
  );

  return <TextInput defaultValue={defaultValue} onChangeText={(value) => throttleCallback(value)} />;
}
```

### useFocusEffect

```js
import React, {useCallback} from "react";
import { useFocusEffect } from "use-hook-kits";

function App({ navigation }) {
  
  useFocusEffect(() => {
    //Component will focus
  }, navigation);

  return <View/>;
}
```

### useTimeoutPromise

```js
import React from "react";
import { useTimeoutPromise } from "use-hook-kits";

const fetchApi = () => new Promise((resolve, reject) => {});

function App({ object, array }) {

useEffect(() => {
      const fetchData = () => useTimeoutPromise(10000,fetchApi());
      // fetchData will reject after 10s if no response
      fetchData();
  }, [])

  return <View/>;
}
```

### useContext, useLogger

```js
import React from "react";
import { StateProvider, useSelector, useDispatch, useLogger } from "use-hook-kits";

const stores = {
    count: 0
};

const reducer = (state, action) => {
    switch (action.type) {
    case 'SET_COUNT':
        return {
            ...state,
            count: action.payload
        };
    default:
        return state;
    }
};

export const setCountDown = ({ dispatch, payload }) => dispatch({ type: 'SET_COUNT', payload });

// Use in App
function App({ object, array }) {
  return (
    <StateProvider reducer={reducer} stores={stores} logger={process.env.NODE_ENV === 'development' ? useLogger : null}>
          <AppContext {...props} />
     </StateProvider>
    );
}

function AppContext({ object, array }) {
  const count = useSelector('count');

  const dispatch = useDispatch();

  const onChangeCount = () => setCountDown({dispatch, count++})

  return <Text>{count}</Text>
}
```