Set touch option to false by default.

Author: dimitrinicolas

CHANGELOG.md

@@ -3,6 +3,13 @@
 This project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 2.0.0 - 2019-04-05
+
+### Breaking change
+
+- Set `touch` option default to `false` because it is in most cases annoying
+when scrolling on a touch device.
+
 ## 1.1.0 - 2019-03-10
 
 - Add `timeout` option.

README.md

@@ -46,7 +46,9 @@ They all return an object of event listeners to add on the element.
 
 ```jsx
 import { useMouseDown } from 'use-mouse-action';
+
 /** ... */
+
 const props = useMouseDown(() => toggle);
 return (<button type="button" {...props}>Click me</button>);
 ```
@@ -58,7 +60,7 @@ The `useMouseDown` and `useMouseUp` are both a shortcut to respectively set the
 - `onAction` (required): The function called on custom click triggered.
 - `down` (default: `false`): If the element should listen to mousedown event.
 - `up` (default: `false`): If the element should listen to mouseup event.
-- `touch` (default: `true`): If the element should listen to touch equivalent
+- `touch` (default: `false`): If the element should listen to touch equivalent
 events.
 - `timeout` (default: `10`): Short timeout in milliseconds to prevents multiple
 events.

cypress/integration/test.js

@@ -24,7 +24,7 @@ context('useMouseDown', () => {
   it('touchstart', () => {
     cy.get(id)
       .trigger('touchstart', { button: 0 })
-      .contains('1');
+      .contains('0');
   });
 
   it('mousedown wrong button', () => {
@@ -77,7 +77,7 @@ context('useMouseUp', () => {
   it('touchend', () => {
     cy.get(id)
       .trigger('touchend')
-      .contains('1');
+      .contains('0');
   });
 
   it('mouseup wrong button', () => {
@@ -139,7 +139,7 @@ context('useMouseAction empty', () => {
   });
 });
 
-context('useMouseDown and touch disabled', () => {
+context('useMouseDown and touch enabled', () => {
   const id = '#4';
 
   it('mousedown', () => {
@@ -151,7 +151,7 @@ context('useMouseDown and touch disabled', () => {
   it('touchstart', () => {
     cy.get(id)
       .trigger('touchstart', { button: 0 })
-      .contains('0');
+      .contains('1');
   });
 
   it('mousedown wrong button', () => {
@@ -180,8 +180,8 @@ context('useMouseDown and touch disabled', () => {
   });
 });
 
-context('useMouseUp and touch disabled', () => {
-  const id = '#2';
+context('useMouseUp and touch enabled', () => {
+  const id = '#5';
 
   it('mousedown', () => {
     cy.get(id)

example/dist/index.js

@@ -74,17 +74,24 @@ ReactDOM.render(
     <main>
       <section>
         <h1>Classic drop-down</h1>
+
         <ClassicDropDown />
+
         <h2>Source Code</h2>
+
         <SyntaxHighlighter language="jsx" style={prism}>
           {classicCode}
         </SyntaxHighlighter>
       </section>
       <section>
         <h1>Faster usable drop-down</h1>
+
         <p>On desktop, you can simply keep mouse button down, drag down and release the button on the wanted item.</p>
+
         <DropDown />
+
         <h2>Source Code</h2>
+
         <SyntaxHighlighter language="jsx" style={prism}>
           {libCode}
         </SyntaxHighlighter>