|
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