diff --git a/retype.manifest b/retype.manifest index 0b199a0..37248c2 100644 --- a/retype.manifest +++ b/retype.manifest @@ -1,6 +1,6 @@ { "version": "3.5.0", - "created": "2024-02-24T03:55:15Z", + "created": "2024-03-29T12:50:10Z", "files": [ { "path": ".nojekyll" @@ -57,8 +57,7 @@ "path": "sitemap.xml.gz" }, { - "path": "useaxios\\index.html", - "old": true + "path": "useaxios\\index.html" }, { "path": "useclickoutside\\index.html" @@ -67,7 +66,8 @@ "path": "useeffectexceptfirstrender\\index.html" }, { - "path": "usefetch\\index.html" + "path": "usefetch\\index.html", + "old": true }, { "path": "usescrollblock\\index.html" diff --git a/src/useAxios.md b/src/useAxios.md new file mode 100644 index 0000000..31fe057 --- /dev/null +++ b/src/useAxios.md @@ -0,0 +1,144 @@ +The `useAxios` hook is a custom React hook designed to simplify HTTP requests using Axios with React functional components. + +## Usage + +```javascript +import { useAxios } from "hookverse"; +``` + +```javascript +const { runAxios, data, loading, isExecuting, error } = useAxios({ + url: "https://api.example.com/data", + method: "GET", + headers: { + "Content-Type": "application/json", + // Additional headers if needed + }, + body: { + // Request body if applicable + }, + searchParams: "param1=value1¶m2=value2", +}); +``` + +## API + +### `runAxios` + +A function to execute the Axios request. + +### `data` + +The response data from the API request. + +### `loading` + +A boolean indicating if the data is currently being fetched. + +### `isExecuting` + +A boolean indicating if the Axios request is currently being executed. + +### `error` + +A boolean indicating if an error occurred during the Axios request. + +## Example: Data Fetching + +```javascript +import React, { useEffect } from "react"; +import { useAxios } from "hookverse"; + +const DataFetchingExample = () => { + const { runAxios, data, loading, error } = useAxios({ + url: "https://api.example.com/data", + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + + useEffect(() => { + runAxios(); + }, [runAxios]); + + return ( +
+ {loading &&

Loading...

} + {error &&

Error occurred while fetching data.

} + {data && ( +
+

Data fetched successfully!

+ {/* Display data */} +
+ )} + +
+ ); +}; + +export default DataFetchingExample; +``` + +## Example: Form Submission + +```javascript +import React, { useState } from "react"; +import { useAxios } from "hookverse"; + +const FormSubmitExample = () => { + const [formData, setFormData] = useState({}); + const { runAxios, isExecuting, error } = useAxios({ + url: "https://api.example.com/submit", + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: formData, + }); + + const handleSubmit = () => { + runAxios(); + }; + + const handleInputChange = (e) => { + const { name, value } = e.target; + setFormData({ ...formData, [name]: value }); + }; + + return ( +
+
+ + + +
+ {error &&

Error occurred while submitting the form.

} +
+ ); +}; + +export default FormSubmitExample; +``` + +In the first example, the `useAxios` hook is utilized to perform an HTTP GET request for data fetching. The `runAxios` function is called to initiate the request, and loading and error states are managed accordingly. Additionally, a button is provided to manually trigger the request, with disabled state based on `loading`. + +In the second example, the `useAxios` hook is utilized to perform an HTTP POST request for form submission. The `runAxios` function is called to initiate the request when the form is submitted, and loading and error states are managed accordingly. The submit button is disabled based on `isExecuting` to prevent multiple submissions while the request is in progress. Additionally, any errors that occur during form submission are displayed to the user. + +``` + +```