react-axios-data

Quick Start

import {useAxiosFetch, manipulateAxiosData} from 'react-axios-data';

-> const { data, error } = useAxiosFetch({url :'',method: 'get', body: {}, headers: {}, params: {}});
-> manipulateAxiosData({
  url: '',
  method: '',
  body: {},
  headers: {},
  params: {}
}).then(({ error, data }) => {});

Installation

$ npm i react-axios-data
          or
$ yarn add react-axios-data

NOTE:

You can add default config for your project so that you don't have to pass these again and again.

axios.defaults.baseURL = "https://api.example.com";
axios.defaults.headers.common["Authorization"] = AUTH_TOKEN;
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

NOTE:

useAxiosFetch → It will only support GET method and work as custom hooks for calling list of data on initial render.
manipulateAxiosData → It returns Promise and support all methods.

Example

GET

const { data, error } = useAxiosFetch({
  url: "/posts",
  params: { userId: 1 },
});

manipulateAxiosData({ url: "/posts", method: "get" }).then(
  ({ error, data }) => {}
);

CREATE

manipulateAxiosData({
  url: "/posts",
  method: "post",
  body: { title: "foo", body: "bar", userId: 1 },
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
}).then(({ error, data }) => {});

UPDATE

manipulateAxiosData({
  url: "/posts/1",
  method: "put",
  body: {
    title: "foo",
    body: "bar",
    userId: 1,
  },
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
}).then(({ error, data }) => {});

PATCH

manipulateAxiosData({
  url: "/posts/1",
  method: "patch",
  body: {
    title: "foo",
  },
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
}).then(({ error, data }) => {});

DELETE

manipulateAxiosData({ url: "/posts/1", method: "delete" }).then(
  ({ error, data }) => {}
);

FILTER

manipulateAxiosData({
  url: "/posts",
  method: "get",
  params: { userId: 1 },
}).then(({ error, data }) => {});

Made with ♥ by Himanshu