Make Ref<T> into Ref<T | null>

.github/workflows/release.yml

@@ -26,5 +26,5 @@ jobs:
       - name: Semantic Release
         uses: cycjimmy/semantic-release-action@v4
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GH_BOT_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

docs/useEnsuredForwardedRef.md

@@ -59,5 +59,5 @@ const Child = React.forwardRef((props, ref) => {
 ```ts
 ensuredForwardRef<T, P = {}>(Component: RefForwardingComponent<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
 
-useEnsuredForwardedRef<T>(ref: React.MutableRefObject<T>): React.MutableRefObject<T>;
+useEnsuredForwardedRef<T>(ref: React.MutableRefObject<T | null>): React.MutableRefObject<T | null>;
 ```

docs/useIntersection.md

@@ -30,7 +30,7 @@ const Demo = () => {
 
 ```ts
 useIntersection(
-  ref: RefObject<HTMLElement>,
+  ref: RefObject<HTMLElement | null>,
   options: IntersectionObserverInit,
 ): IntersectionObserverEntry | null;
 ```

docs/useLatest.md

@@ -32,5 +32,5 @@ const Demo = () => {
 ## Reference
 
 ```ts
-const latestState = useLatest = <T>(state: T): MutableRefObject<T>;
+const latestState = useLatest = <T>(state: T): MutableRefObject<T | null>;
 ```

docs/useLockBodyScroll.md

@@ -30,7 +30,7 @@ const Demo = () => {
 ## Reference
 
 ```ts
-useLockBodyScroll(locked: boolean = true, elementRef?: RefObject<HTMLElement>);
+useLockBodyScroll(locked: boolean = true, elementRef?: RefObject<HTMLElement | null>);
 ```
 
 - `locked` &mdash; Hook will lock scrolling on the body element if `true`, defaults to `true`

docs/useScroll.md

@@ -23,5 +23,5 @@ const Demo = () => {
 ## Reference
 
 ```ts
-useScroll(ref: RefObject<HTMLElement>);
+useScroll(ref: RefObject<HTMLElement | null>);
 ```

docs/useScrolling.md

@@ -22,5 +22,5 @@ const Demo = () => {
 ## Reference
 
 ```ts
-useScrolling(ref: RefObject<HTMLElement>);
+useScrolling(ref: RefObject<HTMLElement | null>);
 ```

src/factory/createHTMLMediaHook.ts

@@ -28,7 +28,7 @@
   seek: (time: number) => void;
 }
 
-type MediaPropsWithRef<T> = HTMLMediaProps & { ref?: React.MutableRefObject<T | null> };
+type MediaPropsWithRef<T> = HTMLMediaProps & { ref?: React.MutableRefObject<T | null | null> };
 
 export default function createHTMLMediaHook<T extends HTMLAudioElement | HTMLVideoElement>(
   tag: 'audio' | 'video'
@@ -235,7 +235,7 @@
       if (props.autoPlay && el.paused) {
         controls.play();
       }
     }, [props.src]);
 
     return [element, state, controls, ref] as const;
   };

src/useEnsuredForwardedRef.ts

@@ -11,8 +11,8 @@ import {
 } from 'react';
 
 export default function useEnsuredForwardedRef<T>(
-  forwardedRef: MutableRefObject<T>
-): MutableRefObject<T> {
+  forwardedRef: MutableRefObject<T | null>
+): MutableRefObject<T | null> {
   const ensuredRef = useRef(forwardedRef && forwardedRef.current);
 
   useEffect(() => {
@@ -29,7 +29,7 @@ export function ensuredForwardRef<T, P = {}>(
   Component: RefForwardingComponent<T, P>
 ): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> {
   return forwardRef((props: PropsWithChildren<P>, ref) => {
-    const ensuredRef = useEnsuredForwardedRef(ref as MutableRefObject<T>);
+    const ensuredRef = useEnsuredForwardedRef(ref as MutableRefObject<T | null>);
     return Component(props, ensuredRef);
   });
 }

src/useFullscreen.ts

@@ -11,7 +11,7 @@ export interface FullScreenOptions {
 }
 
 const useFullscreen = (
-  ref: RefObject<Element>,
+  ref: RefObject<Element | null>,
   enabled: boolean,
   options: FullScreenOptions = {}
 ): boolean => {

src/useIntersection.ts

@@ -1,7 +1,7 @@
 import { RefObject, useEffect, useState } from 'react';
 
 const useIntersection = (
-  ref: RefObject<HTMLElement>,
+  ref: RefObject<HTMLElement | null>,
   options: IntersectionObserverInit
 ): IntersectionObserverEntry | null => {
   const [intersectionObserverEntry, setIntersectionObserverEntry] =

src/useLockBodyScroll.ts

@@ -46,8 +46,11 @@ const doc: Document | undefined = typeof document === 'object' ? document : unde
 let documentListenerAdded = false;
 
 export default !doc
-  ? function useLockBodyMock(_locked: boolean = true, _elementRef?: RefObject<HTMLElement>) {}
-  : function useLockBody(locked: boolean = true, elementRef?: RefObject<HTMLElement>) {
+  ? function useLockBodyMock(
+      _locked: boolean = true,
+      _elementRef?: RefObject<HTMLElement | null>
+    ) {}
+  : function useLockBody(locked: boolean = true, elementRef?: RefObject<HTMLElement | null>) {
       const bodyRef = useRef(doc!.body);
       elementRef = elementRef || bodyRef;
 

src/useMeasureDirty.ts

@@ -10,7 +10,7 @@ export interface ContentRect {
   bottom: number;
 }
 
-const useMeasureDirty = (ref: RefObject<HTMLElement>): ContentRect => {
+const useMeasureDirty = (ref: RefObject<HTMLElement | null>): ContentRect => {
   const frame = useRef(0);
   const [rect, set] = useState({
     width: 0,

src/useMouse.ts

@@ -14,7 +14,7 @@ export interface State {
   elW: number;
 }
 
-const useMouse = (ref: RefObject<Element>): State => {
+const useMouse = (ref: RefObject<Element | null>): State => {
   if (process.env.NODE_ENV === 'development') {
     if (typeof ref !== 'object' || typeof ref.current === 'undefined') {
       console.error('useMouse expects a single ref argument.');

src/useMouseHovered.ts

@@ -9,7 +9,10 @@ export interface UseMouseHoveredOptions {
 
 const nullRef = { current: null };
 
-const useMouseHovered = (ref: RefObject<Element>, options: UseMouseHoveredOptions = {}): State => {
+const useMouseHovered = (
+  ref: RefObject<Element | null>,
+  options: UseMouseHoveredOptions = {}
+): State => {
   const whenHovered = !!options.whenHovered;
   const bound = !!options.bound;
 

src/usePinchZoom.ts

@@ -12,7 +12,7 @@ export enum ZoomState {
 
 export type ZoomStateType = ZoomState.ZOOMING_IN | ZoomState.ZOOMING_OUT;
 
-const usePinchZoom = (ref: RefObject<HTMLElement>) => {
+const usePinchZoom = (ref: RefObject<HTMLElement | null>) => {
   const cacheRef = useMemo<CacheRef>(
     () => ({
       evCache: [],

src/useScroll.ts

@@ -8,7 +8,7 @@ export interface State {
   y: number;
 }
 
-const useScroll = (ref: RefObject<HTMLElement>): State => {
+const useScroll = (ref: RefObject<HTMLElement | null>): State => {
   if (process.env.NODE_ENV === 'development') {
     if (typeof ref !== 'object' || typeof ref.current === 'undefined') {
       console.error('`useScroll` expects a single ref argument.');

src/useScrolling.ts

@@ -1,7 +1,7 @@
 import { RefObject, useEffect, useState } from 'react';
 import { off, on } from './misc/util';
 
-const useScrolling = (ref: RefObject<HTMLElement>): boolean => {
+const useScrolling = (ref: RefObject<HTMLElement | null>): boolean => {
   const [scrolling, setScrolling] = useState<boolean>(false);
 
   useEffect(() => {

src/useSlider.ts

@@ -17,7 +17,7 @@ export interface Options {
   vertical?: boolean;
 }
 
-const useSlider = (ref: RefObject<HTMLElement>, options: Partial<Options> = {}): State => {
+const useSlider = (ref: RefObject<HTMLElement | null>, options: Partial<Options> = {}): State => {
   const isMounted = useMountedState();
   const isSliding = useRef(false);
   const valueRef = useRef(0);

stories/useEnsuredForwardedRef.story.tsx

@@ -43,7 +43,7 @@ const Demo = ({ activeForwardRef }) => {
   );
 };
 
-const Child = forwardRef(({}, ref: MutableRefObject<HTMLTextAreaElement>) => {
+const Child = forwardRef(({}, ref: MutableRefObject<HTMLTextAreaElement | null>) => {
   const ensuredForwardRef = useEnsuredForwardedRef(ref);
 
   const [size, setSize] = useState(INITIAL_SIZE);

tests/useEnsuredForwardedRef.test.tsx

@@ -49,7 +49,7 @@ test('should return a valid ref when the forwarded ref is undefined', () => {
 
   const { ensuredRef } = result.current;
 
-  expect(ensuredRef.current.id).toBe('test_id');
+  expect(ensuredRef.current?.id).toBe('test_id');
 });
 
 test('should return a valid ref when using the wrapper function style', () => {