Ecosyste.ms: Awesome

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

https://github.com/zakariaharti/react-hookedup

:alien: A collection of useful React hooks
https://github.com/zakariaharti/react-hookedup

hooks react react-hooks useful-utilities

Last synced: 2 months ago
JSON representation

:alien: A collection of useful React hooks

Lists

README 

        
![react hookedup](/header.png)



[![npm](https://img.shields.io/npm/v/react-hookedup.svg?style=for-the-badge)](https://www.npmjs.com/package/react-hookedup)

 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](https://github.com/zakariaharti/react-hookedup/blob/master/LICENSE.md)

[![Storybook](https://img.shields.io/badge/docs-storybook-pink.svg?style=for-the-badge)](https://zakariaharti.github.io/react-hookedup/)



>Hooks require at least React 16.8



## Installation



**using npm**



```

npm install react-hookedup --save

```



**using yarn**



```

yarn add react-hookedup

```



# Demo

Visit [here](https://zakariaharti.github.io/react-hookedup)



# hooks



### `common hooks`



| Name                                    | Description            | Arguments        | Returns     |

| ---------------------------------------- | --------------------- | ----------------- | ----------- |

| [useArray](#useArray) | useful hook for manipulating arrays  | initial value | {value, setValue, removeById, removeIndex, clear} |

| [useBoolean](#useBoolean) | useful hook for manipulating booleans  | initial value | {value, setValue, toggle, setTrue, setFalse} |

| [useCounter](#useCounter) | counter hook  | value,{upperLimit,lowerLimit,step,loop} | {value, setValue, increase,decrease} |

| [useFocus](#useFocus) | focus hook | null | {focused, bind} |

| [useHover](#useHover) | hover hook | null | {hovered, bind} |

| [useInput](#useInput) | input handling hook | initial value | {value, setValue, onChange, bindToInput, bind, hasValue, clear} |



### `lifecycles hooks`



| Name                                    | Description            | Arguments        | Returns     |

| ---------------------------------------- | --------------------- | ----------------- | ----------- |

| [useLifecycleHooks](#useLifecycleHooks) | use lifecycle methods  | {onMount, onUnmount} | void |

| [useOnMount](#useOnMount) | componentDidMount like lifecycle  | Function | void |

| [useOnUnmount](#useOnUnmount) | componentWillUnmount like lifecycle  | Function | void |

| [useMergeState](#useMergeState) | merge the previous state with new one | initial value of the state | {setState: Function, state} |

| [usePrevious](#usePrevious) | get the previous value of the state | initial value of the state | the previous value |



### `timers hooks`



| Name                                    | Description            | Arguments        | Returns     |

| ---------------------------------------- | --------------------- | ----------------- | ----------- |

| [useInterval](#useInterval) | use setInterval via hooks  | {function, delay} | void |

| [useTimeout](#useTimeout) | use setTimeout via hooks | {function, delay} | void |



### `network hooks`



| Name                                    | Description            | Arguments        | Returns     |

| ---------------------------------------- | --------------------- | ----------------- | ----------- |

| [useOnLineStatus](#useOnLineStatus) | check if the browser is connected to the internet  | null| {online} |



# Usage



### `useArray`



```js

import { useArray } from 'react-hookedup';



const ExampleUseArray = () => {

  const {

    add,

    clear,

    removeIndex,

    value: currentArray

  } = useArray(['cat','dog','bird']);



  const {

    bindToInput,

    value

  } = useInput('');



  const {

    bindToInput: bindToInput2,

    value: value2

  } = useInput('');



  return(

    


      


        current array is : {JSON.stringify(currentArray)}

      


      


        add element :

        

         add(value)}>add

      


      


        remove element by index :

        

         removeIndex(value2)}>delete

      


      


        delete all items :

         clear()}>clear

      


    


  )

};

```



### `useBoolean`



```js

import { useBoolean } from 'react-hookedup';



const ExampleUseBoolean = () => {

  const {toggle, value} = useBoolean(false);



  return(

    


      
{JSON.stringify(value)}


       toggle()}>toggle

    


  );

};

```



Methods:



- `toggle`

- `setTrue`

- `setFalse`



### `useOnMount`



```jsx

import { useOnMount } from 'react-hookedup';



const App = () => {

  useOnMount(() => console.log("hello world"));

  return 
 hello world 
;

};

```



### `useOnUnmount`



```jsx

const App = () => {

  useOnUnmount(() => console.log("goodbye world"));

  return 
 goodbye world 
;

};

```



### `useLifecycleHooks`



```jsx

const App = () => {

  useLifecycleHooks({

    onMount: () => console.log("mounted!"),

    onUnmount: () => console.log("unmounting!")

  });



  return 
 hello world 
;

};

```



### `useCounter`



```jsx

const counter = useCounter(0);

const limitedNumber = useCounter(3, { upperLimit: 5, lowerLimit: 3 });

const rotatingNumber = useCounter(0, {

  upperLimit: 5,

  lowerLimit: 0,

  loop: true

});

```



Methods:



Both `increase` and `decrease` take an optional `amount` argument which is 1 by default, and will override the `step` property if it's used in the options.



- `increase(amount = 1)`

- `decrease(amount = 1 )`



Options:



- `lowerLimit`

- `upperLimit`

- `loop`

- `step` - sets the increase/decrease amount of the number upfront, but it can still be overriden by `number.increase(3)` or `number.decrease(5)`



### `useInput`



```jsx

const newTodo = useInput("");

```



```jsx



```



```jsx



```



Methods:



- `clear`

- `onChange`

- `bindToInput` - binds the `value` and `onChange` props to an input that has `e.target.value`

- `bind` - binds the `value` and `onChange` props to an input that's using only `e` in `onChange` (like most external components)



Properties:



- `hasValue`



### `useFocus`



```jsx

const ExampleUseFocus = () => {

  const {focused, bind} = useFocus();



  return(

    


      
this is input is : {focused ? 'focused' : 'not focused'}


      

    


  );

};

```



### `useHover`



```jsx

const ExampleUseHover = () => {

  const {hovered, bind} = useHover();



  return(

    


      
this is input is : {hovered ? 'hovered' : 'not hovered'}


      

    


  );

};

```



### `useArray`



```jsx

const todos = useArray([]);

```



Methods:



- `add`

- `clear`

- `removeIndex`

- `removeById`



### useMergeState



```jsx

const { state, setState } = useMergeState({ loading: false });

setState({ loading: true, data: [1, 2, 3] });

```



Methods:



- `setState(value)` - will merge the `value` with the current `state` (like this.setState works in React)



Properties:



- `state` - the current state



### `usePrevious`



Use it to get the previous value of a prop or a state value.  

It's from the official [React Docs](https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state).  

It might come out of the box in the future.



```jsx

const Counter = () => {

  const [count, setCount] = useState(0);

  const prevCount = usePrevious(count);

  return (

    


      Now: {count}, before: {prevCount}

    


  );

};

```



### `useInterval`



```jsx

const useIntervalExample = () => {

  useInterval(() => alert('hello world'), 1500);



  return (

    


      I will alert in 1.5 s

    


  );

};

```



### `useTimeout`



```jsx

const useTimeoutExample = () => {

  useTimeout(() => alert('hello world'), 1500);



  return (

    


      I will alert in 1.5 s

    


  );

};

```



### `useOnLineStatus`



```jsx

const useOnLineStatusExample = () => {

  const {online} = useOnLineStatus();



  return (

    


      you are : {online ? 'online' : 'offline'}

    


  );

};

```