access to inner input element in react-select

Question

there is an script out there called farsitype.js and i want to use it with react-select component but there is no way to direct access to inner input field to add attribute to it. is there any way that we can add attributes to inner input field in react-select?

Answer 1

If you are talking about this react-select library. You can customize the Inputcomponent like so:

import React from 'react';
import Select, { components } from 'react-select';
import { typeOptions } from '../data';

const Input = props => {
  // add attribues to the component below
  return <components.Input {...props} />;
};

export default () => (
  <Select
    components={{ Input }}
    options={typeOptions}
  />
);