Pass props to promiseFn.

Author: ghengeveld

README.md

@@ -99,12 +99,12 @@ Creating a custom instance of Async, bound to a specific promiseFn:
 ```js
 import { createInstance } from "react-async"
 
-const loadCustomer = () => fetch("/api/customer").then(...)
+const loadCustomer = ({ customerId }) => fetch(`/api/customers/${customerId}`).then(...)
 
 const AsyncCustomer = createInstance({ promiseFn: loadCustomer })
 
 const MyComponent = () => (
-  <AsyncCustomer>
+  <AsyncCustomer customerId="123">
     <AsyncCustomer.Resolved>{customer => `Hello ${customer.name}`}</AsyncCustomer.Resolved>
   </AsyncCustomer>
 )
@@ -116,7 +116,7 @@ Similarly, this allows you to set default `onResolve` and `onReject` callbacks.
 
 `<Async>` takes the following properties:
 
-- `promiseFn` {() => Promise} A function that returns a promise; invoked immediately in `componentDidMount` and without arguments
+- `promiseFn` {() => Promise} A function that returns a promise; invoked immediately in `componentDidMount` and receives props (object) as arguments
 - `deferFn` {() => Promise} A function that returns a promise; invoked only by calling `run`, with arguments being passed through
 - `watch` {any} Watches this property through `componentDidUpdate` and re-runs the `promiseFn` when the value changes (`oldValue !== newValue`)
 - `onResolve` {Function} Callback function invoked when a promise resolves, receives data as argument

src/index.js

@@ -40,7 +40,7 @@ export const createInstance = (defaultProps = {}) => {
       if (!promiseFn) return
       this.counter++
       this.setState({ isLoading: true, startedAt: new Date(), finishedAt: undefined })
-      return promiseFn().then(this.onResolve(this.counter), this.onReject(this.counter))
+      return promiseFn(this.props).then(this.onResolve(this.counter), this.onReject(this.counter))
     }
 
     run = (...args) => {

src/spec.js

@@ -16,6 +16,12 @@ test("runs promiseFn on mount", () => {
   expect(promiseFn).toHaveBeenCalledTimes(1)
 })
 
+test("calls promiseFn with props", () => {
+  const promiseFn = jest.fn().mockReturnValue(Promise.resolve())
+  render(<Async promiseFn={promiseFn} anotherProp="123" />)
+  expect(promiseFn).toHaveBeenCalledWith({ promiseFn, anotherProp: "123" })
+})
+
 test("passes resolved data to children as render prop", async () => {
   const promiseFn = () => resolveTo("done")
   const { getByText } = render(<Async promiseFn={promiseFn}>{({ data }) => data || null}</Async>)