Use react-is for widget type check

Prerequisites

• I have read the documentation;

Description

Starting from React 16.3.0 the component is not always a function, but could be an object if it was wrapped with React.forwardRef.

According to the guidelines, react-is should be used for type validation. The proper way of doing that is simply call - ReactIs.isValidElementType(Widget);

The possible place to fix: utils.js#L96

Steps to Reproduce

1. Define DescriptionField and wrap it with React.forwardRef

const DescriptionField = React.forwardRef((props, ref) => (
    <YourComponent {...props} ref={ref} />)
)

1. Define custom fields

const fields = { DescriptionField }

1. Pass fields to SchemaForm

<SchemaForm
   ...
   fields={fields}
   ...
/>

1. Observe in the console

Uncaught Error: Unsupported widget definition: object

Expected behavior

Validation successfully passed.

Actual behavior

Validation is not passed, error is thrown.

Version

"react-jsonschema-form": "^1.0.3"

[snirp]

Same issue here for a custom widget wrapped in a (react-redux connect) HOC.

[lyleunderwood]

I’m trying to use custom widgets with rjsf and I have a HOC that wraps my components with React.forwardRef. I seem to be getting the same error in the most recent version of rjsf.

I have updated the fiddle above to use the newest version of rjsf with this fix included. It still produces the same error..

As far as I can tell, ReactIs.isForwardRef will check for elements of ForwardRefs, it doesn’t check for a component, which is the direct result of React.forwardRef.