Fetching contributors…
Cannot retrieve contributors at this time
78 lines (55 sloc) 1.25 KB


Tracks user "scratches" or swipes.


import {ScratchSensor} from 'libreact/lib/ScratchSensor';

<ScratchSensor>{(state) =>
  <div style={{
    width: 300,
    height: 300,
    border: '1px solid tomato',
    <pre style={{fontFamily: 'monospace'}}>
      {JSON.stringify(state, null, 4)}


  • bond — optional, boolean or string, bonding name to provide as data prop.
  • disabled — optional, boolean, whether to not track scratches.


Render prop receives an object with the following signature.

interface IScratchSensorState {
  isScratching?: boolean;
  start?: number;
  end?: number;
  x?: number;
  y?: number;
  dx?: number;
  dy?: number;
  docX?: number;
  docY?: number;
  posX?: number;
  posY?: number;
  elH?: number;
  elW?: number;
  elX?: number;
  elY?: number;

withScratch() HOC

Injects scratch prop into your component.

import {withScratch} from 'libreact/lib/ScratchSensor';

const MyCompWithScratch = withScratch(MyComp);

@withScratch decorator

Injects scratch prop into your component.

import {withScratch} from 'libreact/lib/ScratchSensor';

class MyComp extends Component {