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.