@billogram/foundation-list-data-provider

A React component for fetching list data

Usage no npm install needed!

<script type="module">
  import billogramFoundationListDataProvider from 'https://cdn.skypack.dev/@billogram/foundation-list-data-provider';
</script>

README

@billogram/foundation-list-data-provider

A React component for fetching list data

Install

yarn add @billogram/foundation-list-data-provider

Usage

import {
    createListDataProvider,
} from '@billogram/foundation-list-data-provider';

See types for exported types.

createListDataProvider

Using FoundationListDataConsumer and FoundationListDataProvider.

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


const {
    FoundationListDataConsumer,
    FoundationListDataProvider,
} = createListDataProvider<RowData, Data, Options>();

function ListDataFetchingComponent() {
    function fetchData(): Promise<FoundationListDataProviderFetchResult<RowData, Data>> {
        return Promise.resolve({});
    }

    const initialFetchDataOptions: Options = {};

    return (
        <FoundationListDataProvider<RowData, Data, Options>
            fetchData={ fetchData }
            initialFetchDataOptions={ initialFetchDataOptions }>
            <FoundationListDataConsumer<RowData, Data, Options>>
                { ({ fetchInitial, fetchMore, fetchSort, result, updateItem }) => (
                    <div>...</div>
                ) }
            </FoundationListDataConsumer>
        </FoundationListDataProvider>
    );
}

Using FoundationListDataProsumer.

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


const {
    FoundationListDataProsumer,
} = createListDataProvider<RowData, Data, Options>();

function ListDataFetchingComponent() {
    function fetchData(): Promise<FoundationListDataProviderFetchResult<RowData, Data>> {
        return Promise.resolve({});
    }

    const initialFetchDataOptions: Options = {};

    return (
        <FoundationListDataProsumer<TRowData, Data, Options>
            fetchData={ fetchData }
            initialFetchDataOptions={ initialFetchDataOptions }>
            { ({ fetchInitial, fetchMore, fetchSort, result, updateItem }) => (
                <div>...</div>
            ) }
        </FoundationListDataProsumer>
    );
}

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