react-refetcher

A React component for (re)fetching data.

Install

npm install --save react-refetcher

Usage

Render props version

import * as React from 'react'
import { Refetcher } from 'react-refetcher'
 
class Example extends React.Component {
  render () {
    return (
      <Refetcher url="https://jsonplaceholder.typicode.com/todos" interval={5000}>
        {({ error, result, loading }) => (
          <div>
            {error && 'Error!'}
            {loading && 'Loading...'}
            <ul>
              {result && result.map(todo => (
                <li key={todo.id}>{todo.title}</li>
              ))}
            </ul>
          </div>
        )}
      </Refetcher>
    )
  }
}

Hooks version

import * as React from 'react'
import { useRefetcher } from 'react-refetcher'
 
function Example() {
  const { error, result, loading } = useRefetcher('https://jsonplaceholder.typicode.com/todos', 5000)
  return (
    <div>
      {error && 'Error!'}
      {loading && 'Loading...'}
      <ul>
        {result && result.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  )
}

License

MIT © andrevargas