react-optimistic

A generic, optimistic update helper.

import Optimistic from 'react-optimistic'

// ...

<Optimistic>
  {({ state, reqState, updater }) =>
    <div>
      <button
        className="optimistic-btn"
        onClick={updater(successfulAction)} // successfulAction returns a Promise
        >
        {state}
      </button>
      <br />
      Request state: {reqState}
    </div>
  }
</Optimistic>

A naive, optimistic button.

API

• Optimistic : ReactComponent

  The Optimistic component takes a render prop with the following signature:

  interface Args {
    state: string
    reqState: string
    updater: function
    reset: function
  }
  let renderProp: (args: Args) => ReactElement

  • props
    • children: renderProp
    • initialState : string

  Example

    const Foo = ({ onClick }) =>
      <Optimistic>
        {({ state, updater }) => <button onClick={updater(onClick)}>{state}</button>}
      </Optimistic>