mirror of
https://github.com/arthurfiorette/axios-cache-interceptor.git
synced 2025-12-08 17:36:16 +00:00
feat: removed react example
This commit is contained in:
parent
f29dc4076c
commit
d72b122ede
7
examples/react/README.md
Normal file
7
examples/react/README.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
# React example.
|
||||||
|
|
||||||
|
There used to be a simple react example with contexts, but as I mainly work with React on
|
||||||
|
the frontend, I decided to create another library to solve this usage in a beautiful,
|
||||||
|
faster and minimalistic way.
|
||||||
|
|
||||||
|
See [**Axios Cache Hooks**](https://tinylibs.js.org/packages/axios-cache-hooks/)
|
||||||
@ -1,38 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
|
|
||||||
import { useState } from 'react';
|
|
||||||
import { useAxios } from './axios-context';
|
|
||||||
|
|
||||||
export const App = () => {
|
|
||||||
// You can use react context, as exemplified here
|
|
||||||
// but you can also just export the AxiosCacheInstance
|
|
||||||
// from a file and use it directly. Happy coding :)
|
|
||||||
const axios = useAxios();
|
|
||||||
|
|
||||||
const [{ data, error, loading }, setResponse] = useState({
|
|
||||||
data: [],
|
|
||||||
loading: true,
|
|
||||||
error: null
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
axios.get('https://jsonplaceholder.typicode.com/users').then(
|
|
||||||
({ data }) => setResponse({ data, loading: false, error: null }),
|
|
||||||
(error) => setResponse({ data: [], loading: false, error })
|
|
||||||
);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return <div>Loading...</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return <div>Error: {error.message}</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div>{data}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Replace ../../src with axios-cache-interceptor
|
|
||||||
*/
|
|
||||||
|
|
||||||
import Axios from 'axios';
|
|
||||||
import { createContext, useContext, useState } from 'react';
|
|
||||||
import { setupCache } from '../../src'; // axios-cache-interceptor
|
|
||||||
|
|
||||||
/** @type {import('react').Context<import('../../src').AxiosCacheInstance>} */
|
|
||||||
const AxiosContext = createContext(null);
|
|
||||||
|
|
||||||
export const useAxios = () => useContext(AxiosContext);
|
|
||||||
|
|
||||||
export const AxiosProvider = ({ children }) => {
|
|
||||||
const [axios] = useState(
|
|
||||||
setupCache(
|
|
||||||
// Custom instance to prevent conflict with other pieces of code
|
|
||||||
Axios.create(),
|
|
||||||
// cache config
|
|
||||||
{}
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
return <AxiosContext.Provider value={axios}>{children}</AxiosContext.Provider>;
|
|
||||||
};
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
|
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
import { App } from './app';
|
|
||||||
import { AxiosProvider } from './axios-context';
|
|
||||||
|
|
||||||
ReactDOM.render(
|
|
||||||
<AxiosProvider>
|
|
||||||
<App />
|
|
||||||
</AxiosProvider>,
|
|
||||||
document.getElementById('root')
|
|
||||||
);
|
|
||||||
Loading…
x
Reference in New Issue
Block a user