react-dynamics

User interaction building blocks for React

Overview

This library defines simple building blocks for coding complex interactions.

Approach:

• declarative, JSX-oriented
• some assembly effort required
• extra care to avoid timing bugs
• composition using function-as-child technique

Core elements:

• Data: request data on demand and asynchronously wait for result
• Op: trigger long-running action and report its results to the user
• Task: status tracker started and stopped via user events (for e.g. dropdowns, popups)
• Delay: basic timeout state triggered via prop

Op Usage

Simple usage example of the Op component:

<Op
    action={() => doSomethingReturningPromise()}
    onComplete={result => doSomethingElseUnlessAlreadyUnmounted(result)}
>
    {(invoke, isPending, lastOp) =>
        <form onSubmit={() => invoke()} action="javascript:void(0)">
            {lastOp && lastOp.isError
                ? <var>Please try again! Error: {lastOp.error}</var>
                : null
            }

            {isPending ? <Spinner/> : null}

            ... input elements, etc ...

            <button type="submit" disabled={isPending}>Submit</button>
        </form>
    }
</Op>