react-use-stream
Eagerly fetch pages of data for use in your react application.
Installing
Using NPM:
npm i react-use-stream
Using yarn:
yarn add react-use-stream
useStream
useStream
allows to fetch all the pages of data from your server.
Hook options
useStream
take the following options.
-
getPage: function(page) -> response
- required
- This function accepts a page number and should return the page data fetched from your server.
- The returned response must contain the row data for this page and the total record count.
-
totalRecordsLocation: String
- optional
- defaults to
total
- This option is passed to
_.get
to retrieve the total record count from the response returned by thegetPage
.
-
dataLocation: String
- optional
- defaults to
data
- This option is passed to
_.get
to retrieve the row data from the response returned by thegetPage
.
Returns
The an object containing data retrieved and some additional meta.
rows
: The rows fetchedstreamInfo
: ObjectisStreaming
: Boolean indicating if we are still fetching datatotalRecords
: The total record count as returned in the response of first pageisLoading
: Boolean indicating if we are still loading the first pageprogress
: Float between 0 - 1. Indicates the percentage of data loaded.error
: Any error occurred during the stream
Example
const rows isStreaming totalRecords isLoading progress = return <> isLoading ? <div>Loading</div> : isStreaming ? <progress value=progress/> : null <Table rows=rows streamInfo= isStreaming totalRecords isLoading /> </>
Check the live demo here