@loriick/use-http-client v0.2.5

@loriick/use-http-client

Install

npm

npm install --save @loriick/use-http-client

yarn

yarn add @loriick/use-http-client

Usage

GET - method

import React from "react";

import useHttpClient from "@loriick/use-http-client";

const GetExample = () => {
  const { data, status, error } = useHttpClient("http://myapi.fr/posts/");

  if (status === "pending") {
    return <p>Loading</p>;
  }

  if (status === "rejected") {
    return <p>{error.message}</p>;
  }
  return data.map((d) => <p key={d.id}>{d.title}</p>);
};

POST - method

import React, { useState } from "react";

import useHttpClient from "@loriick/use-http-client";

const PostExample = () => {
  const [title, setTitle] = useState("");

  const { data, status, error, executeRequest } = useHttpClient(
    "http://myapi.fr/posts/",
    {
      method: "POST",
      onRender: false,
      body: { title },
      options: {
        headers: {
          "Content-type": "application/json;",
        },
      },
    }
  );

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    await executeRequest();
  };

  return (
    <form onSubmit={()=> handleSumit()}>
      <input
        name="title"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setvalue(e.target.value)
        }
        value={title}
        placeholder={Enter your title here}
      />

      <button type="submit">Submit</button>
    </form>
  );
};

License

MIT © Loriick

This hook is created using create-react-hook.