Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
KieranTH opened this issue Dec 7, 2023 · 1 comment
Labels
enhancement New feature or request

Comments

@KieranTH
Copy link

KieranTH commented Dec 7, 2023

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!

@KieranTH KieranTH added the enhancement New feature or request label Dec 7, 2023
@KieranTH
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant