axios-instances
v1.0.3
Published
A custom hook package for handling API calls in React applications.
Downloads
105
Readme
Unleash the Power of Seamless API Calls
Dive into the world of axios-instance – the React hook that turns the complexity of Axios-based API calls into a thrilling adventure! This dynamic hook effortlessly juggles the intricacies of API requests, loading states, and error handling, providing you with a hassle-free experience. But that's not all – brace yourself for a feature-packed journey with support for token authentication, payload integration, and query parameters. It's not just a hook; it's your ultimate solution for conquering a spectrum of RESTful HTTP methods like GET, POST, PUT, DELETE, and beyond!
Installation: A Swift Launchpad 🚀
Embark on your journey by installing the axios-instance package with just one command:
npm install axios-instances
Parameters: Your Personalization Toolkit 🧰
Customize your API interactions with an array of flexible parameters:
| Name | Details | | ----------------- | ------------------------------------------------------------------ | | method | Command the HTTP method for your requests (e.g., "GET", "POST", etc.). | | url | Target the API endpoint you want to conquer. | | headers | Amplify your requests with additional headers. | | queryParams | An object containing query parameters to be included in the request URL. | | payload | Arm yourself with data for a victorious encounter, perfect for methods like POST or PUT. |
Usage/Examples: Craft Your Epic Saga 🛡️
Witness the magic unfold in your React component with useApiRequestWithAuth:
import { useApiRequestWithAuth } from 'use-axios-hook';
const HeroicComponent = () => {
const { data, isLoading, error } = useApiRequestWithAuth(
'https://jsonplaceholder.typicode.com/posts',
{ method: 'GET' }
);
if (isLoading) {
return <div>⌛ Loading...</div>;
}
if (error) {
return <div>⚔️ Error: {error.message}</div>;
}
if (!data) {
return <div>🤷♂️ No data available.</div>;
}
// Craft your component with the fetched data
return (
<div>
{data.map((item: any) => (
<div key={item.id}>{item.title}</div>
))}
</div>
);
};
Feel the thrill, customize HeroicComponent to unleash your unique use case, and let axios-instance be your trusty sidekick in this epic API saga. Your journey to API greatness starts here! 🌟
Suggestions
Suggestions are always welcome! For suggestions, email [email protected] or [email protected].
Support
For support, email [email protected] or [email protected].