gitreadme
gitreadme
Send Mail

Say Goodbye to Api Headaches: Effortless Api Call

Withreact-api-call

react-api-call.js

npm i react-api-call

Download & Installation

First ever - NPM Who will manage Your api calls to make your development more easily. This can make Your life easier.

Let's get started

Fastest Models for Your Needs:
3 Easy Steps to Effortless API Calls

first-project.js
Step 01
mahfuzrp@mrp:~/first$ npm i react-api-call
Enumerating objects: 1, done.
Counting objects: 100% (1/1), done.
Writing objects: 100% (1/1), 72 bytes, done.
Total 1 (delta 0), reused 0 (delta 0).
found 0 vulnerabilities
first-project.js
Step 02
import { useSubmitMethod } from "react-api-call"
first-project.js
Step 02
{ useCookies, useGetMethod,
useDeleteMethod, useSubmitMethod }
first-project.js
Submit Request
import { useSubmitMethod } from "react-api-call"
const App = () => {
const [ isLoading, setIsLoading ] = useState(false);
const { handleSubmit } = useSubmitMethod();

const addProjects = async () => {
setIsLoading()

const apiUrl = "https://api.example.com/projects";
const postData = { };

// If needed you can access response
const handleSuccess = (response) => {
alert("Successful!");
setIsLoading(false);
}

// If needed you can access errors
const handleError = (errors) => {
alert("Errors!");
setIsLoading(false);
}

const { req } = awaithandleSubmit({
data: postData,
url: apiUrl,
onSuccess: handleSuccess,
onError: handleError,
});
}

return (
<button onclick = { addProjects }>Add Project<button/>

// Explanation::
# You can pass more parameters in "handleSubmit" functions. You can pass "refetch" and "method" also.

# Default method is "POST" so if you need something else, then you can pass your method in "method" parameters. Also there is one more parameters called "refetch" if after submission you need to refetch some other api's then you can pass specific refetch in "refetch" parameters.
);
}export default App;
first-project.js
Get Request
import { useGetMethod } from "react-api-call"
const App = () => {

const { error, isLoading, refetch, response } = useGetMethod({
apiUrl: "https://api.example.com/projects",
token: "admin-token",
});

}

return (
// Explanation::
# In this case: If your api is public, then you don't need to pass any type of token parameters.

# Default tokenType is "Bearer". If you need to pass token and your tokenType is different, then you can easily pass your tokenType in "tokenType" parameters and also you can pass the token in "token" parameters.
);
}export default App;
first-project.js
Cookies
import { useCookies } from "react-api-call"
const App = () => {

const { setCookies, getCookies, deleteCookie } = useCookies();

const handleSomething = () => {
// setCookies(name, token, validity)
setCookies("user_token", token, 3);
}

const handleSomething = () => {
// getCookies(name)
const token = getCookies("user_token");
}

const handleSomething = () => {
// deleteCookie(name)
deleteCookie("user_token");
}

}

return (
// Explanation::
# In this case: If needed then you can manage your cookies using some amazing method from "react-api-call".

# There are three function available right now.
# Using setCookies you can "set" data from cookies
# Using getCookies you can "get" data from cookies
# Using deleteCookie you can "delete" data from cookies
);
}export default App;
request-headers.js
headers
const App = () => {

useGetMethod({
token: token,
tokenType: "Bearer",
headersConfig: {
"Content-Type" : "application/json",
"another-header" : "another_value"
}
})

);

return (
// Explanation::
# In this case: token, tokenType, headersConfig are optional. If you need, then you can pass. Default token type is "Bearer" and if you need to change tokenType, then you can also change tokenType. But if you don't need to pass token! And if your api is public then you don't need to pass, "token" and "tokenType".

# Default headers have "Content-Type": "application/json", So if you need something else, then you can also modify headers, using the headersConfig parameter easily.
);
}export default App;
first-project.js
Delete Request
import { useDeleteMethod } from "react-api-call"
const App = () => {

const { isDeleting, handleDelete } = useDeleteMethod({
token: token,
tokenType: "Bearer",
headersConfig: {
"Content-Type" : "application/json",
"another-header" : "another_value"
}
});

const handleSomething = async () => {
// const apiUrl = 'example/id'
const { req } = awaithandleDelete({
url: apiUrl,
refetch: refetch,
onSuccess: handleSuccess,
onError: handleError,
});
}

}

return (
// Explanation::
# You can delete a data in multiple ways, but if you have delete api like: something/deleteId - then you can use this, or if you need pass something in body or like post data then you can use useSubmitMethod.

# Also in this case, there are multiple access you have, you can change headersConfig, you needed you can change tokenType (by default bearer). Also you can pass the token.
);
}export default App;
lets-talk.js

Let's Talk

FacebookInstagramTwitterLinkedInStack OverflowGitHub

Say Goodbye to Api Headaches:
Effortless Api Call With @react-api-call

OTHERS

homeContributorsabout uscontact

OTHERS

DiscussionJoin our forumRecent updatesContribution

subscribe our newsletter

Subscribe our weekly newsletter to get some amazing industrial updates and blogs.

Copyright © 2024 - All right reserved by @mdmahfuzrp