Skip to content

Commit 0639c56

Browse files
committed
Change to rafgraph
1 parent 7384c78 commit 0639c56

File tree

3 files changed

+36
-27
lines changed

3 files changed

+36
-27
lines changed

README.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
# React Interactive
22

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+
[![npm](https://img.shields.io/npm/dm/react-interactive?label=npm)](https://www.npmjs.com/package/react-interactive)
6+
7+
#### Key features:
48
- Style touch interactions in web apps to look like native apps
59
- Style keyboad interactions separate from mouse and touch interactions (focus from tab key, etc)
610
- 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';
4044

4145
## Table of Contents
4246
- [React Interactive](#react-interactive)
43-
- [Live Example](http://react-interactive.rafrex.com)
47+
- [Live Example](https://react-interactive.rafgraph.dev)
4448
- [The Basics](#the-basics)
4549
- [Interactive State Machine](#interactive-state-machine)
4650
- [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
362366
|:------------------|:-----|:---------------------------------|:----------------|
363367
| *base styles* | *Always applied, everything merges with them* | *Not an interactive state* | *`.class`* |
364368
| `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` |
366370
| `hoverActive` | Both hover and active styles applied | `(mouseOn && buttonDown)` OR `(mouseOn && focusKeyDown)` OR `(touchDown, but not consistent across browsers)` | `.class:hover`, `.class:active` |
367371
| `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` |
368372

369373
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.
370374

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.
372376

373377
## State Machine Notes
374378
- The total number of states that the React Interactive state machine can be in is 19.

package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
],
1818
"repository": {
1919
"type": "git",
20-
"url": "git+https://github.com/rafrex/react-interactive.git"
20+
"url": "git+https://github.com/rafgraph/react-interactive.git"
2121
},
2222
"keywords": [
2323
"react",
@@ -28,10 +28,10 @@
2828
"focus",
2929
"keyboard"
3030
],
31-
"author": "Rafael Pedicini <[email protected]>",
31+
"author": "Rafael Pedicini <[email protected]>",
3232
"license": "MIT",
3333
"bugs": {
34-
"url": "https://github.com/rafrex/react-interactive/issues"
34+
"url": "https://github.com/rafgraph/react-interactive/issues"
3535
},
3636
"peerDependencies": {
3737
"react": ">=16.3"
@@ -55,7 +55,7 @@
5555
"webpack": "^3.6.0"
5656
},
5757
"dependencies": {
58-
"detect-it": "^3.0.3",
58+
"detect-it": "^3.0.6",
5959
"object-assign": "^4.1.1",
6060
"prop-types": "^15.6.0"
6161
}

yarn.lock

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1400,36 +1400,41 @@ des.js@^1.0.0:
14001400
inherits "^2.0.1"
14011401
minimalistic-assert "^1.0.0"
14021402

1403-
detect-hover@^1.0.2:
1404-
version "1.0.2"
1405-
resolved "https://registry.yarnpkg.com/detect-hover/-/detect-hover-1.0.2.tgz#589fb0b469220897a9eee3fa36a917e1eda37a21"
1403+
detect-hover@^1.0.3:
1404+
version "1.0.3"
1405+
resolved "https://registry.yarnpkg.com/detect-hover/-/detect-hover-1.0.3.tgz#7392507cbced1bedc9f129a56b197c1eef9076c3"
1406+
integrity sha512-HtLoY+tClgYucJNiovNICGWFp9nOGVmHY44s7L62iPqORXM9vujeWFaVcqtA7XRvp/2Y+4RBUfHbDKFGN+xxZQ==
14061407

14071408
detect-indent@^4.0.0:
14081409
version "4.0.0"
14091410
resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
14101411
dependencies:
14111412
repeating "^2.0.0"
14121413

1413-
detect-it@^3.0.3:
1414-
version "3.0.3"
1415-
resolved "https://registry.yarnpkg.com/detect-it/-/detect-it-3.0.3.tgz#8e13daa0b62126150cbf76d083a1d34d1b07d071"
1414+
detect-it@^3.0.6:
1415+
version "3.0.6"
1416+
resolved "https://registry.yarnpkg.com/detect-it/-/detect-it-3.0.6.tgz#26b1f08d77949effe144f78dd311d4b2f7e688b1"
1417+
integrity sha512-gn+qb1wAejvBGT/07bNC9T8KWVDYSqCXgFaVtPygzCyLK4L53o3b7ZtMTUPGCscT03R2IjXsOVGtzjf6a/8y7w==
14161418
dependencies:
1417-
detect-hover "^1.0.2"
1418-
detect-passive-events "^1.0.4"
1419-
detect-pointer "^1.0.2"
1420-
detect-touch-events "^2.0.1"
1419+
detect-hover "^1.0.3"
1420+
detect-passive-events "^1.0.5"
1421+
detect-pointer "^1.0.3"
1422+
detect-touch-events "^2.0.2"
14211423

1422-
detect-passive-events@^1.0.4:
1423-
version "1.0.4"
1424-
resolved "https://registry.yarnpkg.com/detect-passive-events/-/detect-passive-events-1.0.4.tgz#6ed477e6e5bceb79079735dcd357789d37f9a91a"
1424+
detect-passive-events@^1.0.5:
1425+
version "1.0.5"
1426+
resolved "https://registry.yarnpkg.com/detect-passive-events/-/detect-passive-events-1.0.5.tgz#ce324db665123bef9e368b8059ff95d95217cc05"
1427+
integrity sha512-foW7Q35wwOCxVzW0xLf5XeB5Fhe7oyRgvkBYdiP9IWgLMzjqUqTvsJv9ymuEWGjY6AoDXD3OC294+Z9iuOw0QA==
14251428

1426-
detect-pointer@^1.0.2:
1427-
version "1.0.2"
1428-
resolved "https://registry.yarnpkg.com/detect-pointer/-/detect-pointer-1.0.2.tgz#1e0e4e261dab45055c50c74fb5a4ff09ceb18fbd"
1429+
detect-pointer@^1.0.3:
1430+
version "1.0.3"
1431+
resolved "https://registry.yarnpkg.com/detect-pointer/-/detect-pointer-1.0.3.tgz#27d86d0837951e6c5a0785c8a7fddd9cf5754e08"
1432+
integrity sha512-d0o/Puo3fiGSCXy6H039h9Kwz+mmYCGKZ/qtPFnpN3WfsumjC1C9b5KKvRu+aYnfdI8peqN/iAe7dPd85qIt2g==
14291433

1430-
detect-touch-events@^2.0.1:
1431-
version "2.0.1"
1432-
resolved "https://registry.yarnpkg.com/detect-touch-events/-/detect-touch-events-2.0.1.tgz#365833cf0c5c40c4090a08096b8a688db00fa337"
1434+
detect-touch-events@^2.0.2:
1435+
version "2.0.2"
1436+
resolved "https://registry.yarnpkg.com/detect-touch-events/-/detect-touch-events-2.0.2.tgz#541cc49b05ca544726a3bf2802c5b23e53aeeebb"
1437+
integrity sha512-g8GWBkJLiIDRJfRXEdrd1wMXpNyGId2DkbfuwFahSb4OCvn717hyRJtAcEDISfp3zkwEhZ4Y4woHPA6DeyB3Fw==
14331438

14341439
diffie-hellman@^5.0.0:
14351440
version "5.0.2"

0 commit comments

Comments
 (0)