React Hook used to make API calls

Related tags

query-hook
Overview

query-hook

React hook used to make API calls

Package version NPM JavaScript Style Guide

Install

npm install --save query-hook

Usage

JavaScript

import { useQuery, Status } from 'query-hook';

const Component = () => {
  const usersQuery = useQuery();

  useEffect(() => {
    switch (usersQuery.status) {
      case Status.INIT:
        usersQuery.get('https://api.example.com/users');
        break;
      case Status.SUCCESS:
        console.log('Fetched users :', usersQuery.response.users);
        break;
      case Status.ERROR:
        console.error('Unable to fetch users :', usersQuery.errorResponse.errors);
        break;
    }
  }, [usersQuery.status]);

  return (
    <div>
      {usersQuery?.response.users.map(user => user.name)}
    </div>
  )
}

TypeScript

import { FC } from 'react';

import { useQuery, Status, ErrorData, Response, ErrorResponse } from 'query-hook';

// Custom error data (optional)
interface CustomErrorData extends ErrorData {
  error: 'access_denied' | 'unauthorized' | 'not_found';
}

// Custom response (optional)
interface UsersResponse extends Response {
  users: [{
    email: string;
    name: string;
  }];
}

// Custom error response with custom error data (optional)
interface CustomErrorResponse extends ErrorResponse {
  errors: CustomErrorData[];
}

const Component: FC = () => {
  const usersQuery = useQuery<UsersResponse, CustomErrorResponse>();

  useEffect(() => {
    switch (usersQuery.status) {
      case Status.INIT:
        usersQuery.get('https://api.example.com/users');
        break;
      case Status.SUCCESS:
        console.log('Fetched users :', usersQuery.response.users);
        break;
      case Status.ERROR:
        console.error('Unable to fetch users :', usersQuery.errorResponse.errors);
        break;
    }
  }, [usersQuery.status]);

  return (
    <div>
      {usersQuery?.response.users.map(user => user.name)}
    </div>
  )
}

License

MIT © Lelberto


This hook is created using create-react-hook.

Owner
Jérémy Surieux
Web developer and student
Jérémy Surieux
Essential React custom hooks ⚓ to super charge your components!

Essential React custom hooks ⚓ to super charge your components!

Bhargav Ponnapalli 1.9k Oct 16, 2021
Custom React hooks for your project.

Captain hook Overview Here is a modest list of hooks that I use every day. I will add more in the next few days, keep watching. And if you have some g

Steven Persia 340 Oct 15, 2021
Testing hooks with Jest

Jooks (Jest ❤ + Hooks ????) If you're going through hell testing React Hooks, keep going. (Churchill) What are Custom React Hooks React Hooks are a ne

Antoine Jaussoin 74 Oct 9, 2021
🧘Managed, cancelable and safely typed requests.

Managed, cancelable and safely typed requests. Table of Contents Install Quick Start Usage useResource useRequest request() createRequestError() Type

Matheus Schettino 111 Aug 19, 2021
React hook library, ready to use, written in Typescript.

This is the repository for usehooks.ts, a Gatsby powered blog hosted with Github & netlify that publishes easy to understand React Hook code snippets.

Julien 550 Oct 13, 2021
React hooks for Material UI

React hooks for Material UI Install npm install use-mui or yarn add use-mui Supported components For each state, each hook accepts an optional default

Charles Stover 43 Oct 15, 2021
A debounce hook for react

Features classic debounced callback value debouncing cancel, maxWait and memoization Install yarn add use-debounce # or npm i use-debounce --save Demo

Nik Mostovoy 1.6k Oct 13, 2021
A React.js global state manager with Hooks

A React.js global state manager with Hooks

Lorenzo Spinelli 60 Sep 13, 2021
🐭 React hook that tracks mouse events on selected element - zero dependencies

React Mighty Mouse React hook that tracks mouse events on selected element. Demo Demos created with React DemoTab ?? Install npm install react-hook-mi

mkosir 85 Sep 6, 2021
React hook for conveniently use Fetch API

react-fetch-hook React hook for conveniently use Fetch API. Tiny (556 B). Calculated by size-limit Both Flow and TypeScript types included import Reac

Ilya Lesik 303 Oct 3, 2021
use css in js with react hook.

style-hook easy to write dynamic css features use css in react hook easy to get started install use npm npm i -S style-hook or use yarn yarn add style

null 15 Sep 1, 2021
Understand how React-hook really behaves, once and for all!

Understand how React-hook really behaves, once and for all!

null 63 Oct 4, 2021
React Hook used to make API calls

query-hook React hook used to make API calls Install npm install --save query-hook Usage JavaScript import { useQuery, Status } from 'query-hook'; co

Jérémy Surieux 2 Oct 13, 2021
Easily manage the Google Tag Manager via Hook

React Google Tag Manager Hook Use easily the Google Tag Manager With this custom hook, you can easily use the Google Tag Manager with 0 config, you ju

Guido Porcaro 105 Oct 13, 2021
React hook to handle any async operation in React components, and prevent race conditions

React-async-hook This library only does one small thing, and does it well. Don't expect it to grow in size, because it is feature complete: Handle fet

Sébastien Lorber 966 Oct 16, 2021
😎 📍 React hook for Google Maps Places Autocomplete.

USE-PLACES-AUTOCOMPLETE This is a React hook for Google Maps Places Autocomplete, which helps you build a UI component with the feature of place autoc

Welly 874 Oct 12, 2021
😎 ♻️ A tiny React hook for rendering large datasets like a breeze.

?? ♻️ A tiny React hook for rendering large datasets like a breeze.

Welly 829 Oct 8, 2021
React hook for using keyboard shortcuts in components.

react-hotkeys-hook React hook for using keyboard shortcuts in components. This is a hook version for the hotkeys package. Documentation and live examp

Johannes Klauss 843 Oct 13, 2021
⚛️ Minimal "optimistic UI" pattern implementation with a React Hook

react-optimistic-ui-hook Minimal zero dependency "optimistic UI" pattern implementation in a React Hook. What is "Optimistic UI"? Optimistic UIs don’t

Mohamad Jahani 21 Sep 7, 2021