Click
A state container which provides an interface for targeting specific types of click events (e.g. double-click) and extracting rich stats about click position within the client, window, etc. making it perfect for UX analytics work.
The component will only update its state if all of the conditions specified in props are met.
Installation
yarn add @render-props/clickable
or npm i @render-props/clickable
Usage
import Click from '@render-props/click'
const ButtonClick = props => (
<Click double left>
{
({
clickRef,
numClicks,
screenX,
screenY,
clientX,
clientY,
elementX,
elementY,
rectX,
rectY
}) => (
<button ref={clickRef}>
Clicked: {numClicks} times at
<br/>
{`{clientX: ${clientX}, clientY: ${clientY}}`}
<br/>
{`{screenX: ${screenX}, screenY: ${screenY}}`}
<br/>
{`{elementX: ${elementX}, elementY: ${elementY}}`}
</button>
)
}
</Click>
)
Props
The props for this component are conditions to meet when you want the state
to update. So if you only want to track double clicks, you'd set double={true}
.
All conditions in props must be satisfied for a click to start a state update. If
no props are provided, all events trigger an update.
-
clickTypes {array}
- checks for types specified in this array. Types are defined as such:
-
detail=1
- equality check, i.e.
event.detail === 1
- equality check, i.e.
-
shiftKey
- boolean check, i.e.
event.shiftKey === true
- boolean check, i.e.
-
shiftKey+metaKey
- AND, i.e.
event.shiftKey === true && event.metaKey === true
- AND, i.e.
-
shiftKey|metaKey+detail=1
- OR, i.e.
event.shiftKey === true || event.metaKey === true && detail === 1
- OR, i.e.
-
- checks for types specified in this array. Types are defined as such:
-
single {bool}
- checks for
e.detail === 1
- checks for
-
double {bool}
- checks for
e.detail === 2
- checks for
-
triple {bool}
- checks for
e.detail === 3
- checks for
-
left {bool}
- checks for
e.button === 0
- checks for
-
middle {bool}
- checks for
e.button === 1
- checks for
-
right {bool}
- checks for
e.button === 2
- checks for
-
shift {bool}
- checks for
e.shiftKey === true
- checks for
-
control {bool}
- checks for
e.ctrlKey === true
- checks for
-
meta {bool}
- checks for
e.metaKey === true
- checks for
-
alt {bool}
- checks for
e.altKey === true
- checks for
-
altMeta {bool}
- checks for
e.altKey === true && e.metaKey === true
- checks for
-
altShift {bool}
- checks for
e.altKey === true && e.shiftKey === true
- checks for
-
controlAlt {bool}
- checks for
e.altKey === true && e.ctrlKey === true
- checks for
-
controlShift {bool}
- checks for
e.ctrlKey === true && e.shiftKey === true
- checks for
-
controlMeta {bool}
- checks for
e.ctrlKey === true && e.metaKey === true
- checks for
-
metaShift {bool}
- checks for
e.shiftKey === true && e.metaKey === true
- checks for
-
controlOrMeta {bool}
- checks for
e.ctrlKey === true || e.metaKey === true
- checks for
-
preventDefault {bool}
- calls
preventDefault()
on the event when clicked
- calls
-
onClick {function}
- provides a callback for when the state is updated. Function should accept
two arguments,
(nextState <object>, event <Event>)
.
- provides a callback for when the state is updated. Function should accept
two arguments,
Render Props
Ref
-
clickRef
- This
ref
must be provided to whatever element you are trying to observe the the click of. e.g.<button ref={clickRef}>
- This
State
-
numClicks {integer}
- the number of times the ref'd element was clicked in succession
-
screenX {integer}
- the
x
position of the click in relation to the screen
- the
-
screenY {integer}
- the
y
position of the click in relation to the screen
- the
-
clientX {integer}
- the
x
position of the click in relation to the client
- the
-
clientY {integer}
- the
y
position of the click in relation to the client
- the
-
elementX {integer}
- the
x
position of the click in relation to the element'sDOMRect
- the
-
elementY {integer}
- the
y
position of the click in relation to the element'sDOMRect
- the
-
rectX {integer}
- the
x
coordinate ofDOMRect
for the element
- the
-
rectY {integer}
- the
y
coordinate ofDOMRect
for the element
- the