updates

src/useInlineStyle/useInlineStyle.ts

@@ -1,79 +1,55 @@
-import {
-  useReducer,
-  useCallback,
-  useRef,
-  useMemo,
-  useEffect,
-  RefObject,
-  CSSProperties,
-} from 'react';
+import { useRef, useMemo, useEffect, RefObject, CSSProperties } from 'react';
 
-import { Action, StyleState, StylingFn } from '../types';
+import { StyleState, StylingFn } from '../types';
+import { useSmartReducer } from '../useSmartReducer';
 
 const initialState: StyleState = {
   hover: false,
   active: false,
   focus: false,
 };
 
-function styleReducer(state: StyleState, action: Action): StyleState {
-  switch (action.type) {
-    case 'hover':
-      return { ...state, hover: action.value as boolean };
-    case 'focus':
-      return { ...state, focus: action.value as boolean };
-    case 'active':
-      return { ...state, active: action.value as boolean };
-    default:
-      return state;
+const subscribeToEvents = (el, setStyle) => {
+  if (el) {
+    const pointerOver = () => setStyle('hover', true);
+    const pointerOut = () => setStyle('hover', false);
+    const focus = () => setStyle('focus', true);
+    const blur = () => setStyle('focus', false);
+    const pointerDown = () => setStyle('active', true);
+    const pointerUp = () => setStyle('active', false);
+
+    el.addEventListener('pointerover', pointerOver);
+    el.addEventListener('pointerout', pointerOut);
+    el.addEventListener('focus', focus);
+    el.addEventListener('blur', blur);
+    el.addEventListener('pointerdown', pointerDown);
+    el.addEventListener('pointerup', pointerUp);
+
+    return () => {
+      el.removeEventListener('pointerover', pointerOver);
+      el.removeEventListener('pointerout', pointerOut);
+      el.removeEventListener('focus', focus);
+      el.removeEventListener('blur', blur);
+      el.removeEventListener('pointerdown', pointerDown);
+      el.removeEventListener('pointerup', pointerUp);
+    };
   }
-}
+};
 
 export default function useInlineStyle<T extends HTMLElement, P>(
   styleFn: StylingFn<P>,
   props?: P
 ): [ref: RefObject<T>, style: CSSProperties] {
   const ref = useRef<T>(null);
-  const [styleState, dispatch] = useReducer(styleReducer, initialState);
-  const setStyle = useCallback(
-    (type: string, value: unknown) => dispatch({ type, value }),
-    [dispatch]
-  );
+  const [styleState, setStyle] = useSmartReducer(initialState);
 
   const style = useMemo(() => styleFn(styleState, props), [
     styleFn,
     styleState,
     props,
   ]);
 
-  const subscribeToEvents = useCallback(() => {
-    if (ref.current) {
-      const pointerOver = () => setStyle('hover', true);
-      const pointerOut = () => setStyle('hover', false);
-      const focus = () => setStyle('focus', true);
-      const blur = () => setStyle('focus', false);
-      const pointerDown = () => setStyle('active', true);
-      const pointerUp = () => setStyle('active', false);
-
-      ref.current.addEventListener('pointerover', pointerOver);
-      ref.current.addEventListener('pointerout', pointerOut);
-      ref.current.addEventListener('focus', focus);
-      ref.current.addEventListener('blur', blur);
-      ref.current.addEventListener('pointerdown', pointerDown);
-      ref.current.addEventListener('pointerup', pointerUp);
-
-      return () => {
-        ref.current.removeEventListener('pointerover', pointerOver);
-        ref.current.removeEventListener('pointerout', pointerOut);
-        ref.current.removeEventListener('focus', focus);
-        ref.current.removeEventListener('blur', blur);
-        ref.current.removeEventListener('pointerdown', pointerDown);
-        ref.current.removeEventListener('pointerup', pointerUp);
-      };
-    }
-  }, [ref, setStyle]);
-
-  useEffect(subscribeToEvents, []);
+  useEffect(() => subscribeToEvents(ref.current, setStyle), []);
 
   return [ref, style];
 }

src/useResponsiveness/useResponsiveness.ts

@@ -8,11 +8,11 @@ const DEFAULT_BREAKPOINTS = {
   desktop: 1180,
 };
 
-function getScreenData(breakpoints: any, sizes: any[]): ScreenProps {
-  const width = globalThis.innerWidth || 1280;
-
-  const size = sizes.find(([_, size]) => size < width)[0];
+type BreakPoints = typeof DEFAULT_BREAKPOINTS;
 
+function getScreenData(breakpoints: BreakPoints, sizes: number[]): ScreenProps {
+  const width = globalThis.innerWidth || 1280;
+  const size = sizes.find((size) => size < width)[0];
   const orientation = width > globalThis.innerHeight ? 'landscape' : 'portrait';
 
   const screenIsAtLeast = (
@@ -46,9 +46,11 @@ function getScreenData(breakpoints: any, sizes: any[]): ScreenProps {
   };
 }
 
-export default function useResponsiveness(breakpoints = DEFAULT_BREAKPOINTS) {
-  const sizes = Object.entries(breakpoints).sort(
-    ([aKey, aValue], [bKey, bValue]) => bValue - aValue
+export default function useResponsiveness(
+  breakpoints: BreakPoints = DEFAULT_BREAKPOINTS
+): ScreenProps {
+  const sizes = Object.values(breakpoints).sort(
+    (aValue, bValue) => bValue - aValue
   );
 
   if (sizes[sizes.length - 1][1] !== 0) {