Long press hook
  • Introduction
  • Installation
  • Basics
  • Advanced
    • Definition
    • Callback
    • Options
      • Configuration
        • Events detection
        • Long press threshold
      • React events
        • Persisting event
        • Filtering events
      • Callbacks
        • Press started
        • On move
        • Press finished
        • Long press cancelled
      • Cancellation
        • Cancel outside element
        • Cancel on movement
    • Hook result / Bind function
      • Context
      • Handlers
  • Examples
    • Advanced usage example
    • Live examples
      • Version 3
      • Version 2 (deprecated)
      • Version 1 (deprecated)
  • Migration
    • V1 to V2
    • V2 to V3
    • ⚠️V3.1+
    • Change log
  • Contributions
    • ❤️Donations
    • Pull requests policy
  • Architectural Decisions
    • V1 and V2 deprecation
    • Moving to new repository
Powered by GitBook
On this page
  • [BREAKING CHANGE] Context support
  • Before
  • After
  • [NEW] Reason for cancellation

Was this helpful?

  1. Migration

V1 to V2

[BREAKING CHANGE] Context support

Now hook returns function which can be called with any context in order to access it in callbacks

Before

const bind = useLongPress(() => console.log('Long pressed'));
// ...
return <button {...bind}>Click me</button>;

After

const bind = useLongPress((event, { context }) => console.log('Long pressed with', context));
// ...
return <button {...bind('I am context')}>Click me</button>;
// Or just empty function call if you don't want to pass any context
return <button {...bind()}>Click me</button>;

[NEW] Reason for cancellation

Now onCancel receives cancellation context which can be either:

  • LongPressEventReason.CANCELED_BY_TIMEOUT ('canceled-by-timeout')

  • LongPressEventReason.CANCELED_BY_MOVEMENT ('canceled-by-movement')

You can access it like this:

const bind = useLongPress(() => console.log('Long pressed'), {
  onCancel: (event, { reason }) => console.log('Cancellation reason:', reason) 
})
PreviousLive examplesNextV2 to V3

Last updated 1 year ago

Was this helpful?