Use third party components (e.g. React Select) in React Final Form

InstructorTomasz Łakomy

React

Share this video with your friends

Send Tweet

No one wants to reinvent the wheel.

That's why it's so important to be able to use components that someone else had created and put on npm. In this lesson we are going to learn how to use third party React Select in a React Final Form form to create a searchable select form field.

CXP

~ 5 years ago

I see that we just have {...input} {...props} being sent to the Select field, can we add some of the custom props from Select like formatOptionLabel or onChange?

Ian Jones

~ 5 years ago

@CXP you can pass any props to the Field component and the {...rest} option in ReactSelectAdapter will apply it to the component for you:

<Field
            name="library"
            component={ReactSelectAdapter}
            options={libraries}
            onChange={() => console.log('nice')} // this will fire on ever onChange event
          />

CXP

~ 5 years ago

We had issues using component={ReactSelectAdapter} and then getting the react-select field's new value linked up properly, so we ended up using react-final-form's render instead of component.