Hooks utils

A set of hooks for common scenarios developing React and React Native applications.

Installation

1. Run on your terminal the following command:

``sh
$ npm i --save @cobuildlab/hooks-utils
`

2. To import the library anywhere you would like to use it:

`js
import { usePromise } from '@cobuildlab/hooks-utils';
`

API Docs

| Object | Description |
| ------------------------------------------------ | ---------------------------------------------------------- |
| UsePromiseParams | Params for the usePromise. |
| usePromise | A hook for resolve promises in a declarative way. |
| useOnMount | Shorthand for useEffect with an empty dependencies array |
| useOnClickOutside | Subscribe call to be called when a click is fired outside |
usePrevious | Get previous value of a state |

$3

- initialValue - An initial value for the hook.
- reducer A function that mutates the state of the promise result before it gets returned.

$3

- It manages the promise lifecycle in a declarative way for React Components.

Example

`javascript
// AgencyView.js

import { useCallback } from "react";
import { usePromise } from "@cobuildlab/hooks-utils";
import { fetchAgencies, fetchRoles } from "./agency-actions.js"

const AgencyView = ()=> {
// NOTE: be aware that we using the same names for the error keys returned by the hook
// This is just for keep the example simplest as posible
const [agencies, loadingAgencies, {error, call: fetchAgencies()} ] = usePromise(fetchAgencies);
const [roles, loadingRoles, {error, call: fetchRoles()} ] = usePromise(()=>fetchRoles(agency), {
onCmplete: (response)=>{
console.log(response) // Roles response
},
onError: (error)=>{
console.log(error) // Handle Error
},
});

const fetchData = useCallback(() => {
// Do something
fetchRoles();
fetchAgencies();
});

return ();
}
`

$3

Shorthand for useEffect with an empty dependencies array.
It basically executes the function once on mount and unmount.

Example

`javascript
import React from 'react';
import { useOnMount } from '@cobuildlab/hooks-utils';
import { useHistory } from 'react-router-dom';

const Session = () => {
const history = useHistory();

useOnMount(() => {
if (!isNotAuthenticated) {
history.push(LOGIN_PAGE_ROUTE);
} else {
fetchData(); // Do something
}
});

return {children};
};
`

$3

Hook that subscribe a function to be call when a click is made out side the component on wich the ref is passed down.

`javascript
import React, { useState, useRef } from 'react';
import { useOnClickOutside } from '@cobuildlab/hooks-utils';

const Dropdown = ({ children }) => {
const [isOpen, setIsOpen] = useState(false);
const closeDropdown = () => setIsOpen(false);
const openDropdown = () => setIsOpen(true);

// close dropdown when a click is fired outside itself
const ref = useOnClickOutside(() => {
closeDropdown();
});
// pass the ref returned by the hook to the component
return isOpen &&

;
};
`

If you already are using a ref inside your component yo could pass it to the hook so the hook use that instead of returning a ref

`javascript
import React, { useState, useRef } from 'react';
import { useOnClickOutside } from '@cobuildlab/hooks-utils';

const Dropdown = ({ children }) => {
const [isOpen, setIsOpen] = useState(false);
const closeDropdown = () => setIsOpen(false);
const openDropdown = () => setIsOpen(true);
const ref = useRef();

// Do somthing with the ref...

// close dropdown when a click is fired outside itself
useOnClickOutside(() => {
closeDropdown();
}, ref); // passing the ref to the hook

// pass the same ref to the component
return isOpen &&

;
};
`

$3

Hook that returns the previous value of a state variable.

`javascript
import React, { useState, useRef } from 'react';

const CreateUser = ({ children }) => {
const [user, setUser] = useState({ username: '', password: '' });
const previousUser = usePrevious(user);

useEffect(() => {
// compare user with previousUser state here
}, [user, previousUser]);

const onChange = (value: string, key: string): void => {
setData({ ...user, [field]: value });
}

return

;
};
`

Changelog

$3

- usePrevioushook

$3

- useOnClickOutsidehook

$3

- useOnMounthook

$3

- usePromise` hook