feat: support multiple instances of useAxios configured independently

See README for details about how to use the feature: https://github.com/simoneb/axios-hooks/#multiple-hook-instances

fix #98

.babelrc.js

@@ -3,10 +3,15 @@ const cjs = NODE_ENV === 'test' || BABEL_ENV === 'commonjs'
 const loose = true
 
 module.exports = {
-  presets: [['@babel/env', { loose, modules: false }]],
+  presets: [['@babel/preset-env', { loose, modules: false }]],
   plugins: [
     ['@babel/proposal-object-rest-spread', { loose }],
     cjs && ['@babel/transform-modules-commonjs', { loose }],
     ['@babel/transform-runtime', { useESModules: !cjs }]
-  ].filter(Boolean)
+  ].filter(Boolean),
+  env: {
+    test: {
+      presets: ['@babel/preset-env', '@babel/preset-react']
+    }
+  }
 }

.eslintrc

@@ -12,8 +12,7 @@
   },
   "env": {
     "browser": true,
-    "node": true,
-    "jest": true
+    "node": true
   },
   "globals": {
     "Promise": true

.gitignore

@@ -2,6 +2,5 @@ es
 cjs
 node_modules
 npm-debug.log*
-src/index.d.ts
-*.test.ts
-*.test.ssr.ts
+*.test.ts*
+*.test.ssr.ts*

README.md

@@ -51,12 +51,14 @@ function App() {
 - [configure](#configure-cache-axios-)
 - [serializeCache](#serializeCache)
 - [loadCache](#loadcachecache)
+- [makeUseAxios](#makeuseaxios-cache-axios-)
 
 ### Guides
 
 - [Configuration](#configuration)
 - [Manual Requests](#manual-requests)
 - [Server Side Rendering](#server-side-rendering)
+- [Multiple Hook Instances](#multiple-hook-instances)
 
 ## API
 
@@ -108,7 +110,61 @@ Populates the cache with serialized data generated by `serializeCache`.
 
 - `cache` The serializable representation of the request-response cache generated by `serializeCache`
 
-## Manual requests
+### makeUseAxios({ cache, axios })
+
+Creates an instance of the `useAxios` hook configured with the supplied cache and axios instance.
+
+- `cache` An instance of [lru-cache](https://github.com/isaacs/node-lru-cache)
+- `axios` An instance of [axios](https://github.com/axios/axios#creating-an-instance)
+
+Returns:
+
+An instance of `useAxios` React Hook which will always use the provided cache and axios instance.
+
+The returned value, besides being a function that can be used as a React Hook, also contains the properties:
+
+- `resetConfigure`
+- `configure`
+- `loadCache`
+- `serializeCache`
+
+which are the same as the package's named exports but limited to the `useAxios` instance returned by `makeUseAxios`.
+
+## Configuration
+
+Unless provided via the `configure` function, `axios-hooks` uses as defaults:
+
+- `axios` - the default `axios` package export
+- `cache` - a new instance of the default `lru-cache` package export, with no arguments
+
+These defaults may not suit your needs:
+
+- you may want a common base url for axios requests
+- the default (Infinite) cache size may not be a sensible default
+
+In such cases you can use the `configure` function to provide your custom implementation of both.
+
+> When `configure` is used, it should be invoked once before any usages of the `useAxios` hook
+
+### Example
+
+[![Edit axios-hooks configuration example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/oqvxw6mpyq)
+
+```js
+import { configure } from 'axios-hooks'
+import LRU from 'lru-cache'
+import Axios from 'axios'
+
+const axios = Axios.create({
+  baseURL: 'https://api.myjson.com/'
+})
+
+const cache = new LRU({ max: 10 })
+
+configure({ axios, cache })
+```
+
+## Manual Requests
 
 On the client, requests are executed when the component renders using a React `useEffect` hook.
 
@@ -160,40 +216,6 @@ function App() {
 }
 ```
 
-## Configuration
-
-Unless provided via the `configure` function, `axios-hooks` uses as defaults:
-
-- `axios` - the default `axios` package export
-- `cache` - a new instance of the default `lru-cache` package export, with no arguments
-
-These defaults may not suit your needs:
-
-- you may want a common base url for axios requests
-- the default (Infinite) cache size may not be a sensible default
-
-In such cases you can use the `configure` function to provide your custom implementation of both.
-
-> When `configure` is used, it should be invoked once before any usages of the `useAxios` hook
-
-### Example
-
-[![Edit axios-hooks configuration example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/oqvxw6mpyq)
-
-```js
-import { configure } from 'axios-hooks'
-import LRU from 'lru-cache'
-import Axios from 'axios'
-
-const axios = Axios.create({
-  baseURL: 'https://api.myjson.com/'
-})
-
-const cache = new LRU({ max: 10 })
-
-configure({ axios, cache })
-```
-
 ## Server Side Rendering
 
 `axios-hooks` seamlessly supports server side rendering scenarios, by preloading data on the server and providing the data to the client, so that the client doesn't need to reload it.
@@ -250,6 +272,46 @@ delete window.__AXIOS_HOOKS_CACHE__
 ReactDOM.hydrate(<App />, document.getElementById('root'))
 ```
 
+## Multiple Hook Instances
+
+Sometimes it is necessary to communicate with different APIs or use different caching strategies for different HTTP interactions. 
+
+[`makeUseAxios`](#makeuseaxios-cache-axios) allows to create multiple instances of the `useAxios` React Hook which can be configured and managed independently. 
+
+In other words, `makeUseAxios` is a factory of `useAxios`, which returns a React Hook configured against the provided `axios` or `cache` instances.
+
+> This feature can also be used to create a single pre configured React Hook instance as an alternative to the global `configure` feature
+
+### Example
+
+[![Edit axios-hooks makeUseAxios](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/axios-hooks-quick-start-kfuym)
+
+```js
+import axios from 'axios'
+import { makeUseAxios } from 'axios-hooks'
+
+const useAxios = makeUseAxios({
+  axios: axios.create({ baseUrl: 'https://api.myjson.com '})
+})
+
+function App() {
+  const [{ data, loading, error }, refetch] = useAxios(
+    '/bins/820fc'
+  )
+
+  if (loading) return <p>Loading...</p>
+  if (error) return <p>Error!</p>
+
+  return (
+    <div>
+      <button onClick={refetch}>refetch</button>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  )
+}
+```
+
+
 ## Promises
 
 axios-hooks depends on a native ES6 Promise implementation to be [supported](http://caniuse.com/promises).

jest.config.js

@@ -1,7 +1,6 @@
 const commonOptions = {
   resetMocks: true,
-  coverageDirectory: 'coverage',
-  setupFiles: ['./test/setupTests.js']
+  coverageDirectory: 'coverage'
 }
 
 const projects = [