Typing on StyleClass component not compatible with useRef

[dallinlarsen]

When using a ref to pass a react element into the StyleClass component using the nodeRef prop I am getting a typescript error shown below:

Code: Select all

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: StyleClassProps | Readonly<StyleClassProps>): StyleClass', gave the following error.
    Type 'MutableRefObject<null>' is not assignable to type 'ReactNode'.
  Overload 2 of 2, '(props: StyleClassProps, context: any): StyleClass', gave the following error.
    Type 'MutableRefObject<null>' is not assignable to type 'ReactNode'.
    61 |                 <StyleClass
    62 |                   nodeRef={btnRef16}
          |                ^^^^^^^
    63 |                   selector="@next"
    64 |                   enterClassName="hidden"
    65 |                   leaveToClassName="hidden"
    

The ref is being initalized by this call:

Code: Select all

const btnRef16 = useRef(null);

Upon further investigation the documentation online says that 'nodeRef' is of type 'any'. But the styleclass.d.ts file that defines the types reads:

Code: Select all

export interface StyleClassProps {
    nodeRef?: React.ReactNode;
    selector?: StyleClassSelectorType;
    enterClassName?: string;
    enterActiveClassName?: string;
    enterToClassName?: string;
    leaveClassName?: string;
    leaveActiveClassName?: string;
    leaveToClassName?: string;
    hideOnOutsideClick?: boolean;
    toggleClassName?: string;
    children?: React.ReactNode;
}

Am I doing this correctly or does the type definition of the 'StyleClass' component need to be updated?

[Melloware]

Fixed in 8.2.0: https://github.com/primefaces/primereact/issues/3024