@billogram/foundation-data-provider

A React component for fetching data

Install

yarn add @billogram/foundation-data-provider

Usage

import {
    createDataProvider,
    useDataProviderFetch,
} from '@billogram/foundation-data-provider';

See types for exported types.

createDataProvider

Using FoundationDataConsumer and FoundationDataProvider.

import {
    Data,
    Options,
} from './types';


const {
    FoundationDataConsumer,
    FoundationDataProvider,
} = createDataProvider<Data, Options>();

function DataFetchingComponent() {
    function fetchData(options: Options): Promise<Data> {
        return Promise.resolve({});
    }

    const initialFetchDataOptions: Options = {};

    return (
        <FoundationDataProvider<Data, Options>
            fetchData={ fetchData }
            initialFetchDataOptions={ initialFetchDataOptions }>
            <FoundationDataConsumer<Data, Options>>
                { ({ fetch, result, update }) => (
                    <div>...</div>
                ) }
            </FoundationDataConsumer>
        </FoundationDataProvider>
    );
}

Using FoundationDataProsumer.

import {
    Data,
    Options,
} from './types';


const {
    FoundationDataProsumer,
} = createDataProvider<Data, Options>();

function DataFetchingComponent() {
    function fetchData(options: Options): Promise<Data> {
        return Promise.resolve({});
    }

    const initialFetchDataOptions: Options = {};

    return (
        <FoundationDataProsumer<Data, Options>
            fetchData={ fetchData }
            initialFetchDataOptions={ initialFetchDataOptions }>
            { ({ fetch, result, update }) => (
                <div>...</div>
            ) }
        </FoundationDataProsumer>
    );
}

Note

This library is being published with our use cases in mind and is not necessarily meant to be consumed by the broader public. We probably won't take your feature requests unless they align with our own needs.

License

MIT