Merge pull request #562 from streamich/use-harmonic-interval

Use harmonic interval

README.md

@@ -79,7 +79,7 @@
     <br/>
 - [**Animations**](./docs/Animations.md)
   - [`useRaf`](./docs/useRaf.md) &mdash; re-renders component on each `requestAnimationFrame`.
-  - [`useInterval`](./docs/useInterval.md) &mdash; re-renders component on a set interval using `setInterval`.
+  - [`useInterval`](./docs/useInterval.md) and [`useHarmonicIntervalFn`](./docs/useHarmonicIntervalFn.md) &mdash; re-renders component on a set interval using `setInterval`.
   - [`useSpring`](./docs/useSpring.md) &mdash; interpolates number over time according to spring dynamics.
   - [`useTimeout`](./docs/useTimeout.md) &mdash; re-renders component after a timeout.
   - [`useTimeoutFn`](./docs/useTimeoutFn.md) &mdash; calls given function after a timeout. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/animation-usetimeoutfn--demo)

docs/useHarmonicIntervalFn.md

@@ -0,0 +1,14 @@
+# `useHarmonicIntervalFn`
+
+Same as [`useInterval`](./useInterval.md) hook, but triggers all effects with the same delay
+at the same time.
+
+For example, this allows you to create ticking clocks on the page which re-render second counter
+all at the same time.
+
+
+## Reference
+
+```js
+useHarmonicIntervalFn(fn, delay?: number)
+```

package.json

@@ -51,6 +51,7 @@
     "react-fast-compare": "^2.0.4",
     "react-wait": "^0.3.0",
     "screenfull": "^4.1.0",
+    "set-harmonic-interval": "^1.0.0",
     "throttle-debounce": "^2.0.1",
     "ts-easing": "^0.2.0"
   },

src/__stories__/useHarmonicIntervalFn.story.tsx

@@ -0,0 +1,69 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { useHarmonicIntervalFn, useInterval, useTimeoutFn } from '..';
+import ShowDocs from './util/ShowDocs';
+
+const Clock: React.FC<{ useInt: typeof useHarmonicIntervalFn }> = ({ useInt }) => {
+  const [count, setCount] = React.useState(0);
+  useInt(() => {
+    setCount(cnt => cnt + 1);
+  }, 1000);
+
+  let m: number | string = Math.floor(count / 60);
+  let s: number | string = count % 60;
+
+  m = m < 10 ? '0' + m : String(m);
+  s = s < 10 ? '0' + s : String(s);
+
+  const style: React.CSSProperties = {
+    padding: '20px 5px',
+    border: '1px solid #fafafa',
+    float: 'left',
+    fontFamily: 'monospace',
+  };
+
+  return <div style={style}>{m + ':' + s}</div>;
+};
+
+const Demo: React.FC<{ useInt: typeof useHarmonicIntervalFn }> = ({ useInt }) => {
+  const [showSecondClock, setShowSecondClock] = React.useState(false);
+  useTimeoutFn(() => {
+    setShowSecondClock(true);
+  }, 500);
+
+  const headingStyle: React.CSSProperties = {
+    fontFamily: 'sans',
+    fontSize: '20px',
+    padding: '0',
+    lineHeight: '1.5em',
+  };
+
+  const rowStyle: React.CSSProperties = {
+    width: '100%',
+    clear: 'both',
+  };
+
+  return (
+    <>
+      <div style={rowStyle}>
+        <h2 style={headingStyle}>{useInt.name}</h2>
+        <Clock useInt={useInt} />
+        {showSecondClock ? <Clock useInt={useInt} /> : null}
+      </div>
+    </>
+  );
+};
+
+storiesOf('Animation|useHarmonicIntervalFn', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useHarmonicIntervalFn.md')} />)
+  .add('Demo', () => (
+    <>
+      <Demo useInt={useInterval} />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <Demo useInt={useHarmonicIntervalFn} />
+    </>
+  ));

src/__stories__/useInterval.story.tsx

@@ -28,6 +28,6 @@ const Demo = () => {
   );
 };
 
-storiesOf('Side effects|useInterval', module)
+storiesOf('Animation|useInterval', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useInterval.md')} />)
   .add('Demo', () => <Demo />);

src/index.ts

@@ -23,6 +23,7 @@ export { default as useFullscreen } from './useFullscreen';
 export { default as useGeolocation } from './useGeolocation';
 export { default as useGetSet } from './useGetSet';
 export { default as useGetSetState } from './useGetSetState';
+export { default as useHarmonicIntervalFn } from './useHarmonicIntervalFn';
 export { default as useHover } from './useHover';
 export { default as useHoverDirty } from './useHoverDirty';
 export { default as useIdle } from './useIdle';

src/useHarmonicIntervalFn.ts

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+import { setHarmonicInterval, clearHarmonicInterval } from 'set-harmonic-interval';
+
+const useHarmonicIntervalFn = (fn: Function, delay: number | null = 0) => {
+  const latestCallback = useRef<Function>(() => {});
+
+  useEffect(() => {
+    latestCallback.current = fn;
+  });
+
+  useEffect(() => {
+    if (delay !== null) {
+      const interval = setHarmonicInterval(() => latestCallback.current(), delay);
+      return () => clearHarmonicInterval(interval);
+    }
+    return undefined;
+  }, [delay]);
+};
+
+export default useHarmonicIntervalFn;

yarn.lock

@@ -11062,6 +11062,11 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
+set-harmonic-interval@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/set-harmonic-interval/-/set-harmonic-interval-1.0.0.tgz#2759658395579fc336b9cd026eefe1ad9e742f9b"
+  integrity sha512-RJtrhB5G10e5A1auBv/jHGq0KWfHH8PAb4ln4+kjiHS46aAP12rSdarSj9GDlxQ3QULA2pefEDpm9Y1Xnz+eng==
+
 set-value@^0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"