Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7f53ec2

Browse files
complete
1 parent 34813be commit 7f53ec2

File tree

5 files changed

+243
-6
lines changed

5 files changed

+243
-6
lines changed

‎.gitignore‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
.vscode
2-
dist
32
node_modules
43
react-api-call*.tgz
5-
.DS_Store
6-
README.md
4+
.DS_Store

‎README.md‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
# Say Goodbye to Api Headaches: <br />Effortless Api Call With [@reactapicall](https://github.com/mdmahfuzrp/bachelor-task-server)
2+
3+
Using this package you can manage all of your api calls more simply and easily, visit our website for more information :
4+
5+
## Visit Our Site: [@reactapicall](https://github.com/mdmahfuzrp/bachelor-task-server)
6+
7+
#
8+
9+
## Get started quickly
10+
11+
#### Install react-api-call package with NPM:
12+
13+
```javascript
14+
npm i react-api-call
15+
```
16+
17+
#
18+
19+
## You can follow this steps for your usecase.
20+
21+
#### Get Method:
22+
23+
```javascript
24+
import { useGetMethod } from "react-api-call";
25+
26+
const App = () => {
27+
const { isLoading, refetch, response } = useGetMethod({
28+
apiUrl: "example/api/v1/users",
29+
token: "your-token",
30+
tokenType: "Bearer",
31+
headersConfig: {
32+
"Content-type": "application/json",
33+
},
34+
});
35+
36+
console.log(response);
37+
return (
38+
<div>
39+
<h1>Hello World</h1>
40+
</div>
41+
);
42+
};
43+
44+
export default App;
45+
```
46+
47+
#### Submit Method:
48+
49+
```javascript
50+
import { useSubmitMethod } from "react-api-call";
51+
52+
const App = () => {
53+
const { handleSubmit, isLoading } = useSubmitMethod({
54+
token: "your-token",
55+
tokenType: "Bearer",
56+
headersConfig: {
57+
"Content-type": "application/json",
58+
},
59+
});
60+
61+
const handlePostStatus = async () => {
62+
const postData = {
63+
name: "John Smith",
64+
status: true,
65+
};
66+
67+
const { error, response } = await handleSubmit({
68+
url: "example/api/v1/users",
69+
data: postData,
70+
});
71+
72+
console.log(error, response);
73+
};
74+
return (
75+
<div>
76+
<button onClick={handlePostStatus}>Add Status</button>
77+
</div>
78+
);
79+
};
80+
81+
export default App;
82+
```
83+
84+
#### Delete Method:
85+
86+
```javascript
87+
import { useDeleteMethod } from "react-api-call";
88+
89+
const App = () => {
90+
const { handleDelete, isDeleting } = useDeleteMethod({
91+
token: "your-token",
92+
headersConfig: {
93+
"Content-type": "application/json",
94+
},
95+
tokenType: "Bearer",
96+
});
97+
98+
const handleDeleteStatus = async () => {
99+
const apiUrl = "example.com/status/1";
100+
await handleDelete({ url: apiUrl });
101+
};
102+
return (
103+
<div>
104+
<button onClick={handleDeleteStatus}>Delete</button>
105+
</div>
106+
);
107+
};
108+
109+
export default App;
110+
```
111+
112+
## Now it's time for manage your cookies
113+
114+
#### Set Cookies:
115+
116+
```javascript
117+
import { useCookies } from "react-api-call";
118+
119+
const App = () => {
120+
const { setCookies } = useCookies();
121+
122+
const handleSetCookies = () => {
123+
// in set cookies you need to pass: name, value, expires in day
124+
setCookies("admin-token", token, 7);
125+
};
126+
return (
127+
<div>
128+
<button onClick={handleSetCookies}>Set Token</button>
129+
</div>
130+
);
131+
};
132+
133+
export default App;
134+
```
135+
136+
#### Get Cookies:
137+
138+
```javascript
139+
import { useCookies } from "react-api-call";
140+
141+
const App = () => {
142+
const { getCookies } = useCookies();
143+
144+
const handleGetCookies = () => {
145+
// for get cookies value, you need to pass "name" only
146+
getCookies("admin-token");
147+
};
148+
return (
149+
<div>
150+
<button onClick={handleGetCookies}>Get Token</button>
151+
</div>
152+
);
153+
};
154+
155+
export default App;
156+
```
157+
158+
#### Delete Cookies:
159+
160+
```javascript
161+
import { useCookies } from "react-api-call";
162+
163+
const App = () => {
164+
const { deleteCookie } = useCookies();
165+
166+
const handleDeleteCookies = () => {
167+
// for delete cookies you need to pass: "name" only
168+
deleteCookie("admin-token");
169+
};
170+
return (
171+
<div>
172+
<button onClick={handleDeleteCookies}>Delete Token</button>
173+
</div>
174+
);
175+
};
176+
177+
export default App;
178+
```
179+
180+
#
181+
182+
## CUSTOMIZATION & ACCESS YOU HAVE:
183+
184+
List of parameters, that you can pass if needed:
185+
186+
| Parameters | Description | Usecase | Status | Type | Default Value |
187+
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------- | ---------- | ---------------- |
188+
| `token` | If you need to pass token in your api calls then you can pass this otherwise not. | `useGetMethod`, `useSubmitMethod`, `useDeleteMethod` | Optional | `string` | null |
189+
| `tokenType` | Default tokenType is `Bearer` but if you need to change, then you can pass this parameters with value. | `useGetMethod`, `useSubmitMethod`, `useDeleteMethod` | Optional | `string` | Bearer |
190+
| `headersConfig` | Default is application/json but if needed you change pass this with values. | `useGetMethod`, `useSubmitMethod`, `useDeleteMethod` | Optional | `object` | application/json |
191+
| `apiUrl` | Pass your api url in useGetMethod Hooks. | `useGetMethod` | Required | `string` | null |
192+
| `onError` | After a submit or delete request, (errors) if you need to show error then you can pass a function in this parameters, and you also get error response in your function what you have pass in this parameters. | `useSubmitMethod`, `useDeleteMethod` | Optional | `function` | null |
193+
| `onSuccess` | After a submit or delete request, (success) if you need to show success or showing a alert or something then you can pass a function in this parameters, and you also get success response in your function what you have pass in this parameter. | `useSubmitMethod`, `useDeleteMethod` | Optional | `function` | null |
194+
| `refetch` | If after submit or delete you need to refetch or call some api then you can pass function in this parameters. | `useSubmitMethod`, `useDeleteMethod` | Optional | `function` | null |
195+
| `method` | For submit request default method is `post` and for delete request default method is `delete` so if you need to change you can pass this parameters with your methods. | `useSubmitMethod`, `useDeleteMethod` | Optional | `string` | post & delete |
196+
197+
#
198+
199+
## Contribution From Your End
200+
201+
### Requirements
202+
203+
If you have confidence to contribute in this package, YOU ARE WELCOME.
204+
205+
### Todo
206+
207+
- Component mount unmount loading handle for get api
208+
- Cache in for 5 minutes
209+
210+
#
211+
212+
#
213+
214+
#
215+
216+
# Author
217+
218+
<img src="https://media.licdn.com/dms/image/D5603AQFoOETrDKCE-w/profile-displayphoto-shrink_800_800/0/1697224322908?e=1721865600&v=beta&t=0O5OSlO5Fq5mET8ZQLIdfuC3MkixqOInG7UDefTKuWY" alt="drawing" style="width:150px; border-radius:10px;"/>
219+
220+
```
221+
MD MAHFUZ RP
222+
Software Engineer & Tech Entrepreneur
223+
Developer & Creator of @react-api-call
224+
```
225+
226+
<div align="left">
227+
<a href="https://fb.com/mdmahfuzrp" target="_blank"><img align="center" src="https://i.ibb.co/6bbvqCG/facebook-256x256.png" alt="mdmahfuzrp" height="30" width="30" /></a>
228+
<a href="https://instagram.com/mdmahfuzrp" target="_blank"><img align="center" src="https://i.ibb.co/tX0CDxd/instagram-256x256.png" alt="mdmahfuzrp" height="30" width="30" /></a>
229+
<a href="https://twitter.com/mdmahfuzrp" target="_blank"><img align="center" src="https://i.ibb.co/9VDdfFG/twitter-256x256.png" height="30" width="30" /></a>
230+
<a href="https://www.linkedin.com/in/mdmahfuzrp" target="_blank"><img align="center" src="https://i.ibb.co/FgZy8DM/linkedin-original-256x256.png" height="30" width="30" /></a>
231+
<a href="https://stackoverflow.com/users/22882309/md-mahfuz-rp" target="_blank"><img align="center" src="https://i.ibb.co/HH9b9jP/stack-overflow-logo-AC73-FF9063-seeklogo-com.png" height="30" width="30" /></a>

‎dist/index.d.ts‎

Whitespace-only changes.

‎dist/index.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "react-api-call",
3-
"version": "1.3.6",
3+
"version": "1.8.0",
44
"type": "module",
5-
"description": "This is an npm to manage your all of api calls",
5+
"description": "This is an npm to manage your all of react api call",
66
"main": "dist/index.js",
7-
"types": "dist/index.js",
7+
"types": "dist/index.d.ts",
88
"scripts": {
99
"build:dev": "rollup -c --environment NODE_ENV:development",
1010
"build": "rollup -c --environment NODE_ENV:production"
@@ -19,6 +19,13 @@
1919
],
2020
"author": "Md Mahfuz RP",
2121
"license": "MIT",
22+
"repository": {
23+
"type": "git",
24+
"url": "https://github.com/mdmahfuzrp/react-api-call"
25+
},
26+
"bugs": {
27+
"url": "https://github.com/mdmahfuzrp/react-api-call/issues"
28+
},
2229
"dependencies": {
2330
"axios": "^1.6.8",
2431
"react": "^18.3.1",

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /