Using @microsoft/fast-react-wrapper with refs & accessing public element members

[DavidVollmers]

I choose a bug report for this but I guess this will be more a discussion-like thing.

When working with @microsoft/fast-react-wrapper (version 1.0.0-alpha.27) I run into two problems which I think originate from the same "culprit":

First one is using refs with wrapped elements and second one is calling public methods of the original FASTElement using a ref.

So in general when you want to use the ref prop on a wrapped FASTElement you need to do it like this:

const myRef = React.createRef<Component<typeof MyFASTElement>>();

function onClick() {
  myRef.current.myMethod(); //<-- will not work since the member is not included in the type definition
}

<MyFASTElement ref={myRef} onClick={onClick} />

Problem is that this hides the fact that ref contains an instance of MyFASTElement and thus you cannot access any public members.

I am not yet 100% familiar with this issue but I belive what is missing is a proper union type for the ReactWrapper<TElement> type definition. Something like this:

export declare interface ReactWrapper<TElement extends HTMLElement, TEvents> extends Constructable<ReactModule.Component<ReactWrapperProps<TElement, TEvents>>> {
    displayName: string;
} & TElement & Component

Important is the & TElement & Component part. This way you can build refs like this and have the current value be an instance of the actual element:

const myRef = React.createRef<typeof MyFASTElement>();

function onClick() {
  myRef.current.myMethod();
}

<MyFASTElement ref={myRef} onClick={onClick} />

Any thoughts on this? I am still playing around with it but so far it looks promising...

[janechu]

Unfortunately @microsoft/fast-react-wrapper is being deprecated, refer to #6955.

[chrisdholt]

Strongly recommend https://www.npmjs.com/package/custom-element-react-wrappers as an alternative