Holen
Declarative fetch in React
Install
npm install -S holen
Basic Usage
// Fetch on mount<Holen ="api.startup.com/users"> data <pre>JSON</pre></Holen> // Lazy fetch<Holen = ="api.startup.com/users"> fetching data fetch error <div> <button =>Load Data</button> <pre>JSON</pre> </div> </Holen>
Props
body any
<Holen = ="POST" ="api.startup.com/users"> data <pre>JSON</pre></Holen>
children function
Children is a function that receives an object as its only argument.
The object contains the following keys:
- fetching:
bool
- response:
object
- data:
object
- error:
object
- fetch:
function
<Holen ="api.startup.com/users"> data <div>dataname</div></Holen>
credentials string
headers string
lazy boolean
If true then the component will not perform the fetch on mount.
You must use the fetch
named argument in order to initiate the request.
<Holen ="api.startup.com/users"> fetching fetching && <div>Loading</div> // renders nothing, fetch was not started</Holen>
method string
- default GET
onResponse function
callback called on the response.
const handleResponse = error response if error || !responseok <Holen = ="api.startup.com/users"> data fetch <div> <button =>Load Data</button> <pre>JSON</pre> </div> </Holen>
transformResponse function
- default data => data
The transformResponse
prop is a function that can be used to massage the response data. It receives one argument, data
, and by default, performs an identity operation, returning the data passed to it.
type string
- default json
Fetch method applied to the response. One of json
, text
, or blob
.
url string
url of the request.