User interaction building blocks for React
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


User interaction building blocks for React


This library defines simple building blocks for coding complex interactions.


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

Core areas:

  • DOM interaction affordances
    • Focusable: track DOM focus state for an element and all of its children
    • Hoverable: track DOM mouse hover status
    • Pressable: track mouse click and touch status for gestures and dragging
  • abstract interaction state
    • 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)
    • Timeout: basic timeout state triggered via prop

Op Usage

Simple usage example of the Op component:

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

            {currentOp.isPending ? <Spinner/> : null}

            ... input elements, etc ...

            <button type="submit" disabled={currentOp.isPending}>Submit</button>