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>onChange (optional)
The onChange event of the Touch is called whenever the touched state changes.
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>