🚨 This is highly experimental, APIs will change as highlighted here, use it with maximum precautions.
A simple way to use the new big thing from the React Team: Suspense.
drum-roll@next
requires react@canary
and react-dom@canary
, because it depends on React experimental features.
- Create a fetcher with
createFetcher()
, it accept a function wich will return a Promise. - Use the
<Fetcher />
component to handle your result properly.
import React, { Component } from 'react'
import { createFetcher, Fetcher } from 'drum-roll'
const getUser = createFetcher(username =>
fetch(`https://api.github.com/users/${username}`).then(r => r.json()),
)
class App extends Component {
state = {
username: null,
}
handleClick = () => {
const { value: username } = this.el
this.setState({ username })
}
render() {
const { username } = this.state
return (
<div>
<input ref={el => (this.el = el)} />
<button onClick={this.handleClick}>load</button>
<div>
{username && (
<Fetcher fetcher={getUser(username)} delay={100}>
{(data, error) =>
data ? JSON.stringify(data) : error ? '💥' : '⏳'
}
</Fetcher>
)}
</div>
</div>
)
}
}
export default App