|
1 | 1 | # React Interactive
|
2 | 2 |
|
3 |
| -[Live example](http://react-interactive.rafrex.com) |
| 3 | +[Demo website](https://react-interactive.rafgraph.dev) (demo code on [`gh-pages` branch](https://github.com/rafgraph/react-interactive/tree/gh-pages)) |
| 4 | + |
| 5 | +[](https://www.npmjs.com/package/react-interactive) |
| 6 | + |
| 7 | +#### Key features: |
4 | 8 | - Style touch interactions in web apps to look like native apps
|
5 | 9 | - Style keyboad interactions separate from mouse and touch interactions (focus from tab key, etc)
|
6 | 10 | - Makes every Interactive div/span/etc accessible by default (tab index, role and key click handler added)
|
@@ -40,7 +44,7 @@ import Interactive from 'react-interactive';
|
40 | 44 |
|
41 | 45 | ## Table of Contents
|
42 | 46 | - [React Interactive](#react-interactive)
|
43 |
| - - [Live Example](http://react-interactive.rafrex.com) |
| 47 | + - [Live Example](https://react-interactive.rafgraph.dev) |
44 | 48 | - [The Basics](#the-basics)
|
45 | 49 | - [Interactive State Machine](#interactive-state-machine)
|
46 | 50 | - [Basic Examples](#basic-examples)
|
@@ -362,13 +366,13 @@ Note that since a state machine can only be in one state at a time, to view inte
|
362 | 366 | |:------------------|:-----|:---------------------------------|:----------------|
|
363 | 367 | | *base styles* | *Always applied, everything merges with them* | *Not an interactive state* | *`.class`* |
|
364 | 368 | | `normal` | Not commonly used in CSS (zeroing out/overriding base styles is used instead) | `!mouseOn && !buttonDown && !touchDown && !focusKeyDown` | `.class:not(:hover):not(:active)` |
|
365 |
| -| `hover` | Only hover styles applied | `(mouseOn && !buttonDown && !focusKeyDown)` OR `(after touchDown and sticks until you tap someplace else)` - the [sticky hover CSS bug](https://github.com/rafrex/current-input#sticky-hover-problem) on touch devices | `.class:hover` | |
| 369 | +| `hover` | Only hover styles applied | `(mouseOn && !buttonDown && !focusKeyDown)` OR `(after touchDown and sticks until you tap someplace else)` - the [sticky hover CSS bug](https://github.com/rafgraph/current-input#sticky-hover-problem) on touch devices | `.class:hover` | |
366 | 370 | | `hoverActive` | Both hover and active styles applied | `(mouseOn && buttonDown)` OR `(mouseOn && focusKeyDown)` OR `(touchDown, but not consistent across browsers)` | `.class:hover`, `.class:active` |
|
367 | 371 | | `active` | Only active styles applied | `(buttonDown && !mouseOn currently, but had mouseOn when buttonDown started)` OR `(focusKeyDown && !mouseOn)` OR `(touchDown but not on the element currently, but not consistent across browsers)` | `.class:active` |
|
368 | 372 |
|
369 | 373 | The focus state can be combined with any of the above CSS interactive states to double the total number of states that the CSS interactive state machine can be in.
|
370 | 374 |
|
371 |
| -Note that you could achieve mutually exclusive hover and active states if you apply hover styles with the `.class:hover:not(:active)` selector, and there are other states that you could generate if you wanted to using CSS selectors. You could also create a touch active state by using [Current Input](https://github.com/rafrex/current-input), so CSS has some flexibility, but it comes at the cost of simplicity, and in CSS touch and keyboard interactions are not well supported. |
| 375 | +Note that you could achieve mutually exclusive hover and active states if you apply hover styles with the `.class:hover:not(:active)` selector, and there are other states that you could generate if you wanted to using CSS selectors. You could also create a touch active state by using [Current Input](https://github.com/rafgraph/current-input), so CSS has some flexibility, but it comes at the cost of simplicity, and in CSS touch and keyboard interactions are not well supported. |
372 | 376 |
|
373 | 377 | ## State Machine Notes
|
374 | 378 | - The total number of states that the React Interactive state machine can be in is 19.
|
|
0 commit comments