Package Exports

react-interactive

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-interactive) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Interactive

Live example

Interactive state machine as a React component. There are 5 mutually exclusive states, plus 1 boolean state that can be combined with the other 5.

The 5 mutually exclusive states are:
- normal
- hover
- *hoverActive
- *touchActive
- *keyActive
The 1 boolean state is:
- focus

*The 3 separate [type]Active states can be treated as a single active state if desired. hoverActive (mouse on and button down), touchActive (touch on screen), keyActive (has focus and enter key down).

Compared to CSS, React Interactive is a simpler state machine with better touch device and keyboard support, and on enter/leave state hooks. See comparison.

Basic Examples

// Interactive and focusable div
<Interactive
  as="div"
  normal={{ color: 'black' }}
  hover={{ color: 'green' }}
  active={{ color: 'blue' }} // style to use for the hoverActive, touchActive and keyActive states
  focus={{ outline: '2px solid green' }}
  style={{ fontSize: '16px', padding: '3px', border: '2px dotted black' }}
  onClick={this.handleClick}
>This is an interactive and focusable div</Interactive>

// Interactive as a React Router Link component
import { Link } from 'react-router';
...
<Interactive
  as={Link}
  to="/some/path"
  hover={{ color: 'green' }}
  active={{ color: 'blue' }}
  style={{ color: 'black', padding: '3px' }}
>This is an interactive React Router Link component</Interactive>

// Interactive link with state change hooks
<Interactive
  as="a"
  href="https://example.tld"
  // hook called on every state change, receives prevState and nextState objects
  onStateChange{this.handleInteractiveStateChange}
  hover={{
    style: { color: 'green' },
    // hooks called on enter/leave of the hover state
    onEnter: this.handleEnterHover,
    onLeave: this.handleLeaveHover,
  }}
  active="hover" // use the hover state style for the active state
  style={{ color: 'black', padding: '3px' }}
>This is an interactive link with state change hooks</Interactive>

// Interactive link with separate styles for mouse, touch, and keyboard interactions
<Interactive
  as="a"
  href="https://example.tld"
  normal={{ color: 'black' }}

  // mouse interactions: normal -> hover -> hoverActive
  hover={{ color: 'green' }}
  hoverActive={{ color: 'red' }}

  // touch interactions: normal -> touchActive
  touchActive={{ color: 'blue' }}

  // keyboard interactions: normal -> normal with focus -> keyActive with focus
  // use focusFromTabStyle to only apply the style when focus comes from the keyboard
  focus={{ focusFromTabStyle: { outline: '2px solid orange' }}}
  keyActive={{ color: 'orange' }}

>This is an interactive link with separate styles for each type of interaction</Interactive>

// Interactive div with class names instead of styles
<Interactive
  as="div"
  hover={{ className: 'hover-class' }}
  hoverActive={{ className: 'hover-active-class' }}
  touchActive={{ className: 'touch-active-class' }}
  keyActive={{ className: 'key-active-class' }}
  // use focusFromTabClassName to only apply the class when focus comes from the keyboard
  focus={{ focusFromTabClassName: 'tab-focus-class' }}
  className="some-class"
>This is an interactive div with CSS classes instead of inline styles</Interactive>

Installing `react-interactive`

$ npm install react-interactive

import Interactive from 'react-interactive';