ScratchSensor.md

<ScratchSensor>

Tracks user "scratches" or swipes.

Usage

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)}
    </pre>
  </div>
}</ScratchSensor>

Props

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

State

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';

@withScratch
class MyComp extends Component {

}