test: 💍 add useScratch() stories

src/index.ts

@@ -73,6 +73,7 @@ export { default as useRaf } from './useRaf';
 export { default as useRafLoop } from './useRafLoop';
 export { default as useRafState } from './useRafState';
 export { default as useSearchParam } from './useSearchParam';
+export { default as useScratch } from './useScratch';
 export { default as useScroll } from './useScroll';
 export { default as useScrolling } from './useScrolling';
 export { default as useSessionStorage } from './useSessionStorage';

src/useScratch.ts

@@ -33,7 +33,7 @@ const useScratch = ({
   onScratch = noop,
   onScratchStart = noop,
   onScratchEnd = noop,
-}: ScratchSensorParams = {}): [ScratchSensorState, (el: HTMLElement | null) => void] => {
+}: ScratchSensorParams = {}): [(el: HTMLElement | null) => void, ScratchSensorState] => {
   const [state, setState] = useState<ScratchSensorState>({ isScratching: false });
   const refState = useRef<ScratchSensorState>(state);
   const refScratching = useRef<boolean>(false);
@@ -154,7 +154,7 @@ const useScratch = ({
     };
   }, [el, disabled, onScratchStart, onScratch, onScratchEnd]);
 
-  return [state, setEl];
+  return [setEl, state];
 };
 
 export interface ScratchSensorProps extends ScratchSensorParams {
@@ -163,7 +163,7 @@ export interface ScratchSensorProps extends ScratchSensorParams {
 
 export const ScratchSensor: FC<ScratchSensorProps> = props => {
   const { children, ...params } = props;
-  const [state, ref] = useScratch(params);
+  const [ref, state] = useScratch(params);
   const element = render(props, state);
   return cloneElement(element, {
     ...element.props,

stories/useScratch.story.tsx

@@ -0,0 +1,46 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { useScratch } from '../src';
+import ShowDocs from './util/ShowDocs';
+
+const Demo = () => {
+  const [ref, state] = useScratch();
+
+  const blockStyle: React.CSSProperties = {
+    position: 'relative',
+    width: 400,
+    height: 400,
+    border: '1px solid tomato',
+  };
+
+  const preStyle: React.CSSProperties = {
+    pointerEvents: 'none',
+    userSelect: 'none',
+  };
+
+  let { x = 0, y = 0, dx = 0, dy = 0 } = state;
+  if (dx < 0) [x, dx] = [x + dx, -dx];
+  if (dy < 0) [y, dy] = [y + dy, -dy];
+
+  const rectangleStyle: React.CSSProperties = {
+    position: 'absolute',
+    left: x,
+    top: y,
+    width: dx,
+    height: dy,
+    border: '1px solid tomato',
+    pointerEvents: 'none',
+    userSelect: 'none',
+  };
+
+  return (
+    <div ref={ref} style={blockStyle}>
+      <pre style={preStyle}>{JSON.stringify(state, null, 4)}</pre>
+      {state.isScratching && <div style={rectangleStyle} />}
+    </div>
+  );
+};
+
+storiesOf('Sensors/useScratch', module)
+  // .add('Docs', () => <ShowDocs md={require('../docs/useScroll.md')} />)
+  .add('Demo', () => <Demo />);