use-long-press - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

package.json

 {
     "name": "use-long-press",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "React hook for detecting click (or tap) and hold event. Easy to use, highly customizable options, thoroughly tested.",
@@ -5,0 +5,0 @@ "author": "minwork",

README.md

@@ -12,5 +12,5 @@ # React Long Press Hook :point_down:
 
-- Easy to use
-- Highly customizable options
-- Thoroughly tested
+-   Easy to use
+-   Highly customizable options
+-   Thoroughly tested
 
@@ -32,19 +32,15 @@ ## Install
 ```tsx
-import React from 'react'
-import { useLongPress } from 'use-long-press'
+import React from 'react';
+import { useLongPress } from 'use-long-press';
 
 const Example = () => {
-  const bind = useLongPress(() => {
-      console.log('Long pressed!');
-  });
+    const bind = useLongPress(() => {
+        console.log('Long pressed!');
+    });
 
-  return (
-    <button {...bind}>
-      Press me
-    </button>
-  )
-}
+    return <button {...bind}>Press me</button>;
+};
 ```
 
-## Example
+## Live example
 
@@ -54,21 +50,69 @@ [![Edit useLongPress](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/uselongpress-gnej6?fontsize=14&hidenavigation=1&theme=dark)
 ## Advanced usage
-Callback can be either function or `null` if you want to disable the hook.
 
-Additionally hook accepts options object as a second argument.
-```typescript
-useLongPress(callback: ((event?: MouseEvent | TouchEvent) => void) | null, options?: LongPressOptions);
+Hook first parameter, _callback_, can be either function or `null` (if you want to disable the hook).
+
+Additionally you can supply _options_ object as a second parameter.
+
+As a result hook returns object with various handlers (depending on _detect_ option), which can be spread to some element.
+
+### Definition
+
 ```
+useLongPress(callback [, options]): handlers
+```
+
 ### Options
+
 Long press hook can be adjusted using options object, which allow you to fit it to your needs.
 
-| Name | Type | Default | Description |
-| ---- |:----:|:-------:|:-----------|
-|threshold|number|400|Time user need to hold click or tap before long press *callback* is triggered|
-|captureEvent|boolean|false|If React MouseEvent (or TouchEvent) should be supplied as first argument to callbacks|
-|detect|Enum('mouse' &#x7c; 'touch' &#x7c; 'both')|'both'|Which event handlers should be returned in `bind` object. In TS this enum is accessible through `LongPressDetectEvents`|
-|onStart|Function|() => {}|Called when element is initially pressed (before starting timer which detects long press).<br><br>Can accept mouse or touch event if *captureEvents* option is set to `true`.|
-|onFinish|Function|() => {}|Called when press is released (after triggering *callback*).<br><br>Can accept mouse or touch event if *captureEvents* option is set to `true`.|
-|onCancel|Function|() => {}|Called when press is released before *threshold* time elapses, therefore before long press occurs.<br><br>Can accept mouse or touch event if *captureEvents* option is set to `true`.|
+| Name         |                    Type                    | Default  | Description                                                                                                                                                                           |
+| ------------ | :----------------------------------------: | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| threshold    |                   number                   |   400    | Time user need to hold click or tap before long press _callback_ is triggered                                                                                                         |
+| captureEvent |                  boolean                   |  false   | If React MouseEvent (or TouchEvent) should be supplied as first argument to callbacks                                                                                                 |
+| detect       | Enum('mouse' &#x7c; 'touch' &#x7c; 'both') |  'both'  | Which event handlers should be returned in `bind` object. In TS this enum is accessible through `LongPressDetectEvents`                                                               |
+| onStart      |                  Function                  | () => {} | Called when element is initially pressed (before starting timer which detects long press).<br><br>Can accept mouse or touch event if _captureEvents_ option is set to `true`.         |
+| onFinish     |                  Function                  | () => {} | Called when press is released (after triggering _callback_).<br><br>Can accept mouse or touch event if _captureEvents_ option is set to `true`.                                       |
+| onCancel     |                  Function                  | () => {} | Called when press is released before _threshold_ time elapses, therefore before long press occurs.<br><br>Can accept mouse or touch event if _captureEvents_ option is set to `true`. |
+
+### Example
+
+```jsx harmony
+import React, { useState, useCallback } from 'react';
+import { useLongPress } from 'use-long-press';
+
+export default function AdvancedExample() {
+    const [enabled, setEnabled] = useState(true);
+    const callback = useCallback(event => {
+        alert('Long pressed!');
+    }, []);
+    const bind = useLongPress(enabled ? callback : null, {
+        onStart: event => console.log('Press started'),
+        onFinish: event => console.log('Long press finished'),
+        onCancel: event => console.log('Press cancelled'),
+        threshold: 500,
+        captureEvent: true,
+        detect: 'both',
+    });
+
+    return (
+        <div>
+            <button {...bind}>Press and hold</button>
+            <div>
+                <label htmlFor="enabled">
+                    <input
+                        type="checkbox"
+                        id="enabled"
+                        checked={enabled}
+                        onChange={() => setEnabled(current => !current)}
+                    />
+                    Hook enabled
+                </label>
+            </div>
+        </div>
+    );
+}
+```
+
 ## License
 
 MIT © [minwork](https://github.com/minwork)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37832

increased by6.26%

Number of lines in readme file

116

increased by61.11%

No dependency changes