https://github.com/arifwidianto08/use-lazy-fetch

React utility to perform data fetching , featured with react-hooks too. Created by react-create-library
https://github.com/arifwidianto08/use-lazy-fetch

create-react-library hacktoberfest hacktoberfest-2021 hacktoberfest2021 javascript js react react-typescript reactjs tsx typescript utility

Last synced: 9 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/arifwidianto08/use-lazy-fetch
• Owner: arifwidianto08
• Created: 2020-09-14T18:35:57.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-10-30T10:06:05.000Z (over 3 years ago)
• Last Synced: 2025-05-05T18:37:06.016Z (17 days ago)
• Topics: create-react-library, hacktoberfest, hacktoberfest-2021, hacktoberfest2021, javascript, js, react, react-typescript, reactjs, tsx, typescript, utility
• Language: TypeScript
• Homepage:
• Size: 703 KB
• Stars: 1
• Watchers: 1
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
Owner: Arif Widianto

# use-lazy-fetch

> Performing Data Fetch without initializing state and worrying about useEffect

[![NPM](https://img.shields.io/npm/v/use-lazy-fetch.svg)](https://www.npmjs.com/package/use-lazy-fetch) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install 

```bash

npm install --save use-lazy-fetch

```

or using `yarn`

```bash

yarn add use-lazy-fetch

```

## Usage 

```tsx

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(fetchTodos, [], {

    withEffect: true

  })

  if (isLoading) {

    return 
'Loading...'

  }

  return (

    
{data && data.map((todo) => 
{todo.title}
)}

  )

}


export default App

```

## License

## Hacktoberfest

This line is for hacktoberfest thing

Hacktoberfest is the best

MIT © [arifwidianto08](https://github.com/arifwidianto08)