Use third party components (e.g. React Select) in React Final Form
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.
Instructor: [00:00] We have a simple form which allows us to select libraries/frameworks from npm and install it. It consists of a single field with component set to select remap through libraries in order to generate the option values. The libraries, it's an array of objects. Each one of those objects has value and label.
[00:25] Suppose that, for instance, we would like to be able to press V on keyboard and search for Vue. Of course, we can go ahead and implement it ourselves, but there are plenty of solutions from npm. For instance, we could use something called React Select to achieve this effect.
[00:41] To use React Select, import Select from 'react-select'. To use an external React Select instead of the native select, we need to create an adapter.
[00:55] To create an adapter, create a stateless functional component. In this case, we're going to call it react-select-adapter. It is a function that is going to accept an object. From this object, we're going to destructure the input and all the rest that was provided to this component.
[01:12] We're going to return the react-select. We're going to pass in the input. We're going to pass it also the rest of what was provided. We're also going to set this searchable prop to true.
[01:25] Next, use the react-select-adapter as a component in our filled component. Instead of providing the options as children, we're going to remove this part. Instead, we're going to specify an options object that is going to be set to our libraries. Let me format that.
[01:46] If I clicked on this Select, I have all the options. Also, I can search for Vue. I can install Vue from npm.
@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
/>
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.
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?