Saaj UI

genericForwardRef

A utility to create a generic component that accepts a ref

Installation

npx saaj add genericForwardRef

Usage

MyComponent.tsx
import * as React from 'react';
import { View } from 'react-native';
 
import { genericForwardRef } from '@/utils/genericForwardRef';
 
type MyComponentProps<T extends React.ElementType = typeof View> =
  React.ComponentPropsWithRef<T> & {
    as?: T;
  }
 
const MyComponent = genericForwardRef(function MyComponent<
  T extends React.ElementType<React.ComponentPropsWithoutRef<typeof View>>,
>(props: MyComponentProps, ref: React.ForwardedRef<View>) {
  return (
    <View ref={ref} {...props} />
  )
});

On this page