Skip to content
This repository has been archived by the owner on Jan 27, 2021. It is now read-only.

Latest commit

 

History

History
47 lines (34 loc) · 1.28 KB

README.md

File metadata and controls

47 lines (34 loc) · 1.28 KB

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>