arifwidianto08 / use-lazy-fetch

React utility to perform data fetching , featured with react-hooks too. Created by react-create-library

Owner: Arif Widianto

use-lazy-fetch

Performing Data Fetch without initializing state and worrying about useEffect

Install

npm install --save use-lazy-fetch

or using yarn

yarn add use-lazy-fetch

Usage

import React from 'react'

import { useLazyFetch } from 'use-lazy-fetch'

interface Todo {
  data: Array<{
    userId: number
    id: number
    title: string
    completed: boolean
  }>
}

const App = () => {
  const fetchTodos = () => {
    return fetch('https://jsonplaceholder.typicode.com/todos')
      .then((res) => res.json())
      .then((val) => val)
  }
  const { query, isLoading } = useLazyFetch()
  const { data } = query<Todo>(fetchTodos, [], {
    withEffect: true
  })

  if (isLoading) {
    return <div>'Loading...'</div>
  }
  return (
    <div>{data && data.map((todo) => <p key={todo.id}>{todo.title}</p>)}</div>
  )
}

export default App

License

Hacktoberfest

This line is for hacktoberfest thing

Hacktoberfest is the best

MIT © arifwidianto08