Skip to content

Commit 744a3a5

Browse files
committed
Add yarn to readme
1 parent c0904f9 commit 744a3a5

1 file changed

Lines changed: 4 additions & 0 deletions

File tree

README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,8 @@ import { Link } from 'react-router-dom';
147147

148148
#### Installing `react-interactive`
149149
```shell
150+
$ yarn add react-interactive
151+
# OR
150152
$ npm install --save react-interactive
151153
```
152154
```javascript
@@ -184,6 +186,8 @@ For the definition of when each state is entered, see the [state machine definit
184186
| `setStateCallback` | function | `function({ prevState, nextState }) {...}` | Function passed in as a callback when RI calls `setState`. Receives the same object as `onStateChange` as its sole argument, except without the `event` key (`setState` is asynchronous and React events don't persist asynchronously). Use this hook if you need to wait until the DOM is updated before executing the callback. |
185187
| `onClick` | function | `function(event, clickType) {...}` <br><br> Where `clickType` is one of: <br> `'mouseClick'` <br> `'tapClick'` <br> `'keyClick'` | Function called for mouse clicks, touch taps with 1 touch point/finger (called without delay), enter keydown events (if the element has focus), and synthetic click events. The `event` argument will always be a `click` event (`node.click()` is called to generate a click event if needed). The `clickType` argument will always be one of `mouseClick`, `tapClick`, or `keyClick`. It will be `mouseClick` for mouse clicks and for synthetic click events on mouse only and hybrid devices. It will be `tapClick` for touch taps with 1 touch point and for synthetic click events on touch only devices. It will be `keyClick` if the click event was generated from a enter keydown event (or, for some elements, a space keyup event). Note that RI will call `node.click()` for enter keydown events only if there is an `onClick` prop. |
186188
| `onTapTwo` | function | `function(event) {...}` | Function called for taps with 2 touch points, e.g. a 2 finger tap. Event passed in is the `touchend` event from last touch point to leave the surface. |
189+
| `tapTimeCutoff` | whole number | `500` | Number of ms to allow for a tap. This is the cutoff time that separates a tap from a long press. This prop is not required and the default is `500`. |
190+
| `onLongPress` | function | `function(event) {...}` | Function called on long press if touch is present after the `tapTimeCutoff` and if the touch has not moved more than is allowed for a `tap`. Event passed in is the touch start event that started the long press. |
187191
| `touchActiveTapOnly` | boolean | `touchActiveTapOnly` | Add this prop to only remain in the `touchActive` state while a tap is possible. If the touch is moved more than the tolerance for a tap, or held on the screen longer than the time allowed for a tap, then the `touchActive` state is exited. This is useful when the intention of the `touchActive` state is to indicate to the user that they are tapping something. Note that without this prop React Interactive will remain in the `touchActive` state as long as the touch point is on the screen.
188192
| `extraTouchNoTap` | boolean | `extraTouchNoTap` | Add this prop to cancel taps while touching someplace else on the screen. By default RI will ignore extra touches on the screen and allow taps on the RI element regardless of other touches. |
189193
| `nonContainedChild` | boolean | `nonContainedChild` | Add this prop if the DOM node's children are not contained inside of it on the page. For example, a child that is absolutely positioned outside of its parent. React Interactive does some quality control checks using `node.getBoundingClientRect()`, and by default the children are assumed to be within the parent's rectangle, but if this is not the case, then add this prop and the children will be checked. |

0 commit comments

Comments
 (0)