How to add types to React Table IndeterminateCheckbox method

Question

I'm really a beginner at typescript world and, I'm currently using React Table library that has no types by default on documentation.

So, I would like to ask your help to add the types to IndeterminateCheckbox method.

const IndeterminateCheckbox = React.forwardRef(
  ({ indeterminate, ...rest }, ref) => {
    const defaultRef = React.useRef()
    const resolvedRef = ref || defaultRef

    React.useEffect(() => {
      resolvedRef.current.indeterminate = indeterminate
    }, [resolvedRef, indeterminate])

    return (
      <>
        <input type="checkbox" ref={resolvedRef} {...rest} />
      </>
    )
  }
)

Here is the link to sandbox from React Table docs: https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/row-selection-and-pagination?from-embed=&file=/src/App.js:613-1010

My second question is: Where can I find the types and maybe add them by myself?

you can refer thread https://github.com/tannerlinsley/react-table/discussions/1989 for adding typescript — meghahere, Dec 20 '21 at 08:48

score 3 · Answer 1 · answered Feb 03 '21 at 20:00

1. Create @types/react.d.ts

/* eslint-disable */

declare namespace React {
  export default interface RefObject<T> {
    current: T | null;
  }
}

2. The input component

/* eslint-disable no-param-reassign */

import React, { forwardRef, useEffect, useRef } from 'react';

interface IIndeterminateInputProps {
  indeterminate?: boolean;
  name: string;
}

const useCombinedRefs = (
  ...refs: Array<React.Ref<HTMLInputElement> | React.MutableRefObject<null>>
): React.MutableRefObject<HTMLInputElement | null> => {
  const targetRef = useRef(null);

  useEffect(() => {
    refs.forEach(
      (ref: React.Ref<HTMLInputElement> | React.MutableRefObject<null>) => {
        if (!ref) return;

        if (typeof ref === 'function') {
          ref(targetRef.current);
        } else {
          ref.current = targetRef.current;
        }
      },
    );
  }, [refs]);

  return targetRef;
};

const IndeterminateCheckbox = forwardRef<
  HTMLInputElement,
  IIndeterminateInputProps
>(({ indeterminate, ...rest }, ref: React.Ref<HTMLInputElement>) => {
  const defaultRef = useRef(null);
  const combinedRef = useCombinedRefs(ref, defaultRef);

  useEffect(() => {
    if (combinedRef?.current) {
      combinedRef.current.indeterminate = indeterminate ?? false;
    }
  }, [combinedRef, indeterminate]);

  return (
    <>
      <input type="checkbox" ref={combinedRef} {...rest} />
    </>
  );
});

export default IndeterminateCheckbox;

score 1 · Answer 2 · answered Dec 30 '22 at 14:02

I just want to put code here so it is visible to everyone having issues with it. Solution is from the thread from Megha's comment:

import React from "react";

type Props = {
    indeterminate?: boolean;
};

const TableCheckBox: React.ForwardRefRenderFunction<HTMLInputElement, Props> = ({ indeterminate = false, ...rest }, ref) => {
    const defaultRef = React.useRef<HTMLInputElement>();
    const resolvedRef = (ref || defaultRef) as React.MutableRefObject<HTMLInputElement>;

    React.useEffect(() => {
        resolvedRef.current.indeterminate = indeterminate;
    }, [resolvedRef, indeterminate]);

    return (
        <>
            <input type="checkbox" ref={resolvedRef} {...rest} />
        </>
    );
};

export default React.forwardRef(TableCheckBox);

Link: https://github.com/TanStack/table/discussions/1989#discussioncomment-4388612

How to add types to React Table IndeterminateCheckbox method

2 Answers2