player-ui / player

Home Page:https://player-ui.github.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React: use forwardRef within ReactAsset to allow for passing of ref through "props".

KieranTH opened this issue · comments

Is your feature request related to a problem? Please describe.

I'm currently attempting to implement React Hook Form to coincide with Player in a React Webapp. React Hook Form utilises a register function that passes props through to a component. An example of this could be:

<input
  id={"my-field"}
  type={"text"}
  {...register("exampleField")}
/>

This register function spreads a few props to the element; name, onBlur, onChange and ref.

Due to the nature of how React Ref works, ReactAsset consumes the Ref. Docs here.

Describe the solution you'd like

I believe implementing the React forwardRef to the ReactAsset component would solve this issue. This is under the assumption that the current system does not have an alternative method to solve this issue. By my understanding, this should not cause issues with components who are not expecting a ref, allowing "backwards compatibility" from this change.

An example solution:

// Callback Type - As specified from ReactHookForm's definition of the `ref` returned by `register`
export type RefCallBack = (instance: any) => void;


export default forwardRef<
  RefCallBack,
  AssetType<string> | AssetWrapper<AssetType<string>>
>(function ReactAsset(
  {
    ...rest
  },
  ref
) {

Thank you!

EDIT: This will be unnecessary in React 19 - source: https://react.dev/blog/2024/04/25/react-19#ref-as-a-prop