@tremolo-ui/react 0.8.0 → 0.9.0

package/src/hooks/useWheel.ts

@@ -4,9 +4,8 @@ import { createWheel, type WheelOptions } from '@tremolo-ui/dom'
 
 import { useCallbackRef } from './_internal/useCallbackRef'
 
-// `onWheel` is left out: `createWheel` takes it so that `update()` can replace
-// the callback, but this hook takes the handler as its first argument and the
-// option would be silently ignored.
+// `onWheel` is left out: this hook takes the handler as its first argument, so
+// the option would be a second way to say the same thing.
 export interface UseWheelOptions extends Omit<WheelOptions, 'onWheel'> {
   /**
    * Listen on this element rather than on the one the returned ref callback is
@@ -43,7 +42,8 @@ export function useWheel<T extends Element>(
     const element = target ? target.current : node
     if (!element) return
 
-    const instance = createWheel(element, (event) => wheelHandler(event), {
+    const instance = createWheel(element, {
+      onWheel: (event) => wheelHandler(event),
       requireFocus,
     })
 

package/src/index.ts

@@ -4,8 +4,6 @@ export {
   type AnimationCanvasFixedProps,
   type AnimationCanvasProps,
   type AnimationCanvasResizableProps,
-  type DrawFunction,
-  type InitFunction,
 } from './components/AnimationCanvas'
 export { DropZone, type DropZoneProps } from './components/DropZone'
 export {
@@ -70,12 +68,18 @@ export {
 export { type CSSVariables } from './css-variables'
 
 // hooks
-export { useAnimationFrame } from './hooks/useAnimationFrame'
+export {
+  useAnimationFrame,
+  type UseAnimationFrameOptions,
+} from './hooks/useAnimationFrame'
 export { useDrag, type UseDragOptions } from './hooks/useDrag'
 export { useDragValue, type UseDragValueOptions } from './hooks/useDragValue'
 export { useDropZone, type UseDropZoneOptions } from './hooks/useDropZone'
-export { useEventListener } from './hooks/useEventListener'
-export { useInterval } from './hooks/useInterval'
+export {
+  useEventListener,
+  type UseEventListenerOptions,
+  type UseEventListenerTarget,
+} from './hooks/useEventListener'
 export { useLongPress } from './hooks/useLongPress'
 export { useMIDIAccess } from './hooks/useMIDIAccess'
 export { useMIDIInput } from './hooks/useMIDIInput'

package/src/hooks/useInterval.ts

@@ -1,27 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-export function useInterval(callback: () => void, delay: number | null) {
-  const savedCallback = useRef(callback)
-
-  // Remember the latest callback if it changes.
-  useEffect(() => {
-    savedCallback.current = callback
-  }, [callback])
-
-  // Set up the interval.
-  useEffect(() => {
-    // Don't schedule if no delay is specified.
-    // Note: 0 is a valid value for delay.
-    if (delay === null) {
-      return
-    }
-
-    const id = setInterval(() => {
-      savedCallback.current()
-    }, delay)
-
-    return () => {
-      clearInterval(id)
-    }
-  }, [delay])
-}