Skip to content

Latest commit

 

History

History
40 lines (30 loc) · 822 Bytes

File metadata and controls

40 lines (30 loc) · 822 Bytes

Touch

The Touch component is used to known when user is touching some element.

import { Touch } from 'react-powerplug'
<Touch>
  {({ touched, bind }) => (
    <div {...bind}>
      You are {touched ? 'touching' : 'not touching'} this div.
    </div>
  )}
</Touch>

Touch Props

onChange (optional)
The onChange event of the Touch is called whenever the touched state changes.

Touch Children Props

TL;DR: { touched, bind }

touched
boolean
True if is touching the binded element

bind
{ onTouchStart: () => void, onTouchEnd: () => void }
There are the bind event functions that make Touch works.
You must bind some element to track their events.
You can use spread operator to bind effectively an element.

<span {...bind}>Binded!</span>