Nutmeg Plundering Muse

    react-dynamics

    0.10.1 • Public • Published

    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>
    

    Keywords

    Install

    npm i react-dynamics

    DownloadsWeekly Downloads

    13

    Version

    0.10.1

    License

    ISC

    Unpacked Size

    28.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • unframework