@anb98/react-hooks v1.3.2

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

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

Returned state

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

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

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

Returned