Hooks utils

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

Installation

1. Run on your terminal the following command:

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

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

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

UsePromiseParams

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

usePromise(promise, initialValue)

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

Example

// AgencyView.jsimport{useCallback}from"react";import{usePromise}from"@cobuildlab/hooks-utils";import{fetchAgencies,fetchRoles}from"./agency-actions.js"constAgencyView=()=>{// 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 posibleconst[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},});constfetchData=useCallback(()=>{// Do somethingfetchRoles();fetchAgencies();});return();}

useOnMount(effectCallback)

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

Example

importReactfrom'react';import{useOnMount}from'@cobuildlab/hooks-utils';import{useHistory}from'react-router-dom';constSession=()=>{consthistory=useHistory();useOnMount(()=>{if(!isNotAuthenticated){history.push(LOGIN_PAGE_ROUTE);}else{fetchData();// Do something}});return<React.Fragment>{children}</React.Fragment>;};

useOnClickOutside(callback,innerRef)

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

importReact,{useState,useRef}from'react';import{useOnClickOutside}from'@cobuildlab/hooks-utils';constDropdown=({ children })=>{const[isOpen,setIsOpen]=useState(false);constcloseDropdown=()=>setIsOpen(false);constopenDropdown=()=>setIsOpen(true);// close dropdown when a click is fired outside itselfconstref=useOnClickOutside(()=>{closeDropdown();});// pass the ref returned by the hook to the componentreturnisOpen&&<divref={ref}>{children}</div>;};

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

importReact,{useState,useRef}from'react';import{useOnClickOutside}from'@cobuildlab/hooks-utils';constDropdown=({ children })=>{const[isOpen,setIsOpen]=useState(false);constcloseDropdown=()=>setIsOpen(false);constopenDropdown=()=>setIsOpen(true);constref=useRef();// Do somthing with the ref...// close dropdown when a click is fired outside itselfuseOnClickOutside(()=>{closeDropdown();},ref);// passing the ref to the hook// pass the same ref to the componentreturnisOpen&&<divref={ref}>{children}</div>;};

usePrevious(currentState)

Hook that returns the previous value of a state variable.

importReact,{useState,useRef}from'react';constCreateUser=({ children })=>{const[user,setUser]=useState({username: '',password: ''});constpreviousUser=usePrevious(user);useEffect(()=>{// compare user with previousUser state here},[user,previousUser]);constonChange=(value: string,key: string): void=>{setData({ ...user,[field]: value});}return<divonChange={onChange}>{children}</div>;};

Changelog

v0.1.6

• usePrevioushook

v0.1.5

• useOnClickOutsidehook

v0.1.2

• useOnMounthook

v0.1.0

• usePromise hook