Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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>

About

User interaction building blocks for React

Resources

Packages

No packages published