react-optimist

Welcome to React Optimist. A simple API for optimistic UI, using React and taking advantage of the new Context API. Used and maintained by Swipes

Idea

A user clicks on a button, you want to save the new state to a server, but you don't want to show a loader in the meantime. react-optimist let's you easily queue requests in the background while showing the new value. Also known as optimistic ui.

Installation (more options)

$ npm install --save react-optimist

High level

react-optimist consist of two high level API's:

• OptimistProvider is a react class that needs to be added once, similar to Provider (redux), BrowserRouter (react-router) and so on.
• withOptimist is a higher-order-component (HOC) that you wrap any class that either needs to access to the optimistic data, or will be creating it (or both :). It injects a prop "optimist" into the wrapped component.

withOptimist(Component) >> this.props.optimist

The optimist object API

The optimist object injected into your components has a simple api: Main API:

• optimist.set(options) - queue optimistic requests
• optimist.get(key, [fallback]) - get optimistic values Advanced:
• optimist.setDefaultOptions(options) - identify future calls and set default options
• optimist.identify(id) - identify future calls and set default options

optimist.set(options)

Params

• options object - An option object

Option	Type	Default value	Description
key	string	(required)	A key for the queue (ex: goal-reorder, task-119-complete)
value	any	(required)	The value trying to be sent to the server and that should be used (optimistic)
handler	function	(required)	The async handler, (next) => {}, you must call next when done
serial	bool	false	Run all requests added to this queue, not just the last.
clearOnError	boolean	true	When you return an error to next, wipe future requests
debounce (coming soon)	number	0 (ms)	Postpone the server request with x ms from now
throttle (coming soon)	number	0 (ms)	Run server requests every x ms

optimist.get(key, [fallback])

Retreive the current optimistic value or an optional fallback value.

Params

• key string - entry for the store
• fallback any value - value to be used if nothing is in store

Returns: store value or fallback

optimist.setDefaultOptions(options)

This will set default options for future calls to set/get.

Params

• options object - An option object defining defaults, see optimist.set above for supported props.

optimist.identify(id)

This will prepend id for calls to set/get. Not required to run this first

Params

• id string - An id to prepend future calls to optimist.set (useful for id of a task/project/etc)

Other projects

Used and maintained by Swipes

• swiss-react - A CSS-in-js solution with sass-like features and an epic syntax.