Hooks

Table of Contents

• Installation
• setGlobals
• useLazyFetch
• useFetch
• usePromise
• useFetchCache and useLazyFetchCache
• useSearch

Installation

npm i @anb98/react-hooks

setGlobals

This function allows you to set globals options for useFetch, useFetchData, useLazyFetch and useLazyFetchCache

Usage

import { setGlobals } from '@anb98/react-hooks';

setGlobals({
    baseURL: 'http://your-base-url',
    headers: {},
    withCredentials: true,
})

*You don't need to set / at the end of baseURL

setGlobals options

|Property|Description|Type|Default| |-|-|-|-| | baseURL | It sets base url to be concatenate with url of useDataApi options | string | '' | | headers | Request headers | any | null | | withCredentials | Enable cookie credentials | boolean | false |

useLazyFetch

This hook is a wrapper for usePromise hook which consumes an API when calling the handler function.

Usage

import { useLazyFetch } from '@anb98/react-hooks';

const options = {
    url: 'http://your-endpoint-url',
    initialData: {},
    request: { headers: { example: 'test'} },
    onCancel: () => {},
    onComplete: (data, err) => {},
    onFail: (err) => {},
    onSuccess: (data) => {},
};

const TestComponent = () => {
    const [{ 
        data,
        error,
        isError,
        isLoading,
        isSuccess,
        status,
    }, fetchData, resetState, cancelFetch ] = useLazyFetch(options);
    
    const getData = () => {
        const fetchDataOptions = {
            body:{},
            headers: {},
            method: 'post',
            params: {},
            url: '',
            withCredentials: true
        }

        fetchData(fetchDataOptions);
    };

    return (<button onClick={getData}>test</button>);
};

export default TestComponent;

Initial options

|Property|Description|Type|Default| |-|-|-|-| | url | Initial URL to request | string | globals.baseURL | | initialData | Initial data to return as result | any | null | | request | Request config object axios | Request config axios | {} | | onFail | Callback called when request fails | function(err)| ()=>{} | | onSuccess | Callback called when request fails | function(data) | ()=>{} | | onComplete | Callback called when request completes | function(data, err) | ()=>{} | | onCancel | Callback called when request cancels | function() | ()=>{} |

Returned state

|Property|Description|Type|Default| |-|-|-|-| | data | Result of the request | any | initialData | | error | Error of the request | any | null | | isError | It shows if the request fails | boolean | false | | isLoading | It shows if the request is loading | boolean | false | | isSuccess | It shows if the request completed successfully | boolean | false | | status | It shows the request's status | idle | pending | resolved | rejected | idle |

resetState function will reset returned state to initial state.

fetchDataOptions options uses type Request config from axios

useFetch

This hook consumes API when component is mounted and also when calling the handler function.

By default it request with GET method unless you change initial options.

This hook is a wrapper for useLazyFetch.

Usage

import { useFetch } from '@anb98/react-hooks';

const options = {
    deps: [],
    initialData: {},
    request: { headers: { example: 'test'} },
    onCancel: () => {},
    onComplete: (data, err) => {},
    onFail: (err) => {},
    onSuccess: (data) => {},
};

const TestComponent = () => {
    const [{ 
        data,
        error,
        isError,
        isLoading,
        isSuccess,
        status,
    }, fetchData, resetState, cancelFetch ] = useFetch('http://your-endpoint-url', options);
    
    const getData = () => {
        const fetchDataOptions = {
            body:{},
            headers: {},
            method: 'post',
            params: {},
            url: '',
            withCredentials: true
        }

        fetchData(fetchDataOptions);
    };

    return (<button onClick={getData}>test</button>);
};

export default TestComponent;

URL first param is mandatory

Initial options

|Property|Description|Type|Default| |-|-|-|-| |deps| Dependency list to run hook | Array<any> | [] |

usePromise

This hook executes a Promise when calling the handler function.

Usage

import { usePromise } from '@anb98/react-hooks';

const promise = (example, test) => Promise.resolve({ example, test });

const options = {
    deps:[],
    params: ['example', 'test'],
    initialData: {},
    onComplete: (data, err) => {},
    onFail: (err) => {},
    onSuccess: (data) => {},
    onUnmount: ()=>{},
};

const TestComponent = () => {
    const [{ 
        data,
        error,
        isError,
        isLoading,
        isSuccess,
        status,
    }, promiseHandler, resetState ] = usePromise(promise, options);
    
    const getPromiseResult = () => {
        promiseHandler('example', 'test');
    };

    return (<button onClick={getPromiseResult}>test</button>);
};

export default TestComponent;

promise function param is mandatory

handlerOptions are passed to promise function; otherwise it passes params from initial options

resetState function will reset returned state to initial state.

Initial options

|Property|Description|Type|Default| |-|-|-|-| |deps| Dependency list to run hook | Array<any> | [] | |params| Default params to use in promise handler | any[] | [] | | initialData | Initial data to return as result | any | null | | onFail | Callback called when promise fails | function(err)| ()=>{} | | onSuccess | Callback called when promise success | function(data) | ()=>{} | | onComplete | Callback called when promise completes | function(data, err) | ()=>{} | | onUnmount | Callback called when hook is unmounted | function() | ()=>{} |

Returned state

|Property|Description|Type|Default| |-|-|-|-| | data | Result of the request | any | initialData | | error | Error of the request | any | null | | isError | It shows if the request fails | boolean | false | | isLoading | It shows if the request is loading | boolean | false | | isSuccess | It shows if the request completed successfully | boolean | false | | status | It shows the request's status | idle | pending | resolved | rejected | idle |

useFetchCache and useLazyFetchCache

This hooks allow to cache results from request previously fetched. To use this hooks you first need CacheProvider.

import { CacheProvider } from '@anb98/react-hooks';

const App = () => (
    <div className="App">
        <CacheProvider>
            <Main/>
        </CacheProvider>
    </div>
);

All the options and returned values for useFetchCache and useLazyFetchCache are the same from useFetch and useLazyFetch respectively.

To refresh the next request you can add { refresh: true } as second param when calling handler.

Example:

<button onClick={()=>handler({}, { refresh: true })}>
    Fetch Cache
</button>

useSearch

This hook filters results when searching.

Usage

import { useSearch } from '@anb98/react-hooks';

const options = {
    allowFields: [],
    denyFields: []
    sourceData: []
};

const TestComponent = () => {
    const {
        setSourceData,
        setSearchValue,
        filtered,
        sourceData
    } = useSearch(options);

    return (
        <div>
            <input type="text" onChange={(evt)=> setSearchValue(evt.target.value) } />

            <ul>
                {
                    filtered.map((el)=>(
                        <li key={el.id}>{JSON.stringify(el)}</li>
                    ))
                }
            </ul>
        </div>
    );
}

Initial options

|Property|Description|Type|Default| |-|-|-|-| | allowFields | Fields in which search | Array<string> | [] | | denyFields | Fields in which not search | Array<string> | [] | | sourceData | Source data to search | Array<Object> | [] |

Returned

|Property|Description|Type|Default| |-|-|-|-| | setSourceData | Function to set sourceData | function(Array<Object>) | | | setSearchValue | Function to set search value | function(string) | | | filtered | Filtered results from sourceData | Array<string> | [] | | sourceData | Previously set source data | Array<Object> | [] |