https://github.com/humayunkabir/react-axios-request
Promise based HTTP client for ReactJS
https://github.com/humayunkabir/react-axios-request
axios promise react react-axios reactjs request
Last synced: 5 months ago
JSON representation
Promise based HTTP client for ReactJS
- Host: GitHub
- URL: https://github.com/humayunkabir/react-axios-request
- Owner: humayunkabir
- License: mit
- Created: 2020-03-14T14:12:40.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T10:00:25.000Z (over 3 years ago)
- Last Synced: 2025-10-02T16:36:11.990Z (9 months ago)
- Topics: axios, promise, react, react-axios, reactjs, request
- Language: JavaScript
- Size: 323 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Axios Request
Promise based HTTP client for ReactJS. [React Axios Request](https://github.com/humayunkabir/react-axios-request/) use [Axios](https://github.com/axios/axios) under the hood.
```
npm i react-axios-request
```
or
```
yarn add react-axios-request
```
You can perform these requests:
- `get`
- `post`
- `patch`
- `put`
- `delete`
### Example
Let's create a `Login` compoentet using `Request`
#### Authentication Hook
```
const useAuth = () => {
const login = async (requestCallback, loginCallback) => {
const response = await requestCallback() // Assume we get an access token in response
if (response?.data) {
const { accessToken, ...rest } = response.data;
// Do whatever you want with this accessToken
localStorage.setItem("accessToken", accessToken)
// Now calling the callback which is passed from the Login component
!!loginCallback && loginCallback()
}
};
const logout = () => {
// Logout code
localStorage.removeItem("accessToken")
};
return { login, logout }
}
```
#### Login Component
```
import React, { useState } from "react";
import { Request } from "react-axios-request";
const Login = () => {
const { login } = useAuth();
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const cleanState = () => {
setUsername("");
setPassword("");
};
return (
{({ error, requestCallback }) => (
{
e.preventDefault();
login(requestCallback, cleanState);
}}
>
setUsername(target.value)}
/>
setPassword(target.value)}
/>
Login
{error && (
Username and/or Passowrd do(es)n't match. Please try again.
{error.message}
)}
)}
)
};
export default Login;
```
#### Get Request
In `Request` component, `default` method is `get`. To make a `get` request, you don't have to pass `method='get'` to `Request` component.
```
import React from "react";
import { Request } from "react-axios-request";
import { apiBaseUrl } from "./config";
const requestConfig = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("accessToken")}`
}
};
const App = () => (
{({ data, error, requestCallback }) => (
{data?.title}
{data?.description}
)}
);
export default App;
```
### Configuration
Make a component `ReactAxiosRequest` and use this component insted of `Request`. Now you don't have to pass `base` and `config` everytime you use this component like you have to pass in `Request` component.
```
import React from "react";
import { Request } from "react-axios-request";
import { apiBaseUrl } from "./config";
const ReactAxiosRequest = props => {
const requestConfig = {
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("accessToken")}`
}
};
return ;
};
export default ReactAxiosRequest;
```
**Please report bugs and contribute at github:**
- [Repository](https://github.com/humayunkabir/react-axios-request)
- [Issues](https://github.com/humayunkabir/react-axios-request/issues)
- [Projects](https://github.com/humayunkabir/react-axios-request/projects)
Powered by: [react-axios-request](https://github.com/humayunkabir/react-axios-request)