Is it possible to customize the contents of the Clear button in react-bootstrap-typeahead?

Question

Using react-bootstrap-typeahead is it possible to change the contents of the Clear button?

I need to include a FontAwesome icon and "CLEAR" text to match a design.

Looking at the [RBT] Custom Aux Components demo I can see the ClearButton component, but I can't see how to customize this. I tried changing the label prop but this had no effect:

<ClearButton onClick={onClear} label="CLEAR" />

Is it possible to add:

1. label text
2. a FontAwesome icon

to the Clear button?

Answer 1

You can't customize ClearButton itself, but you can follow the example you linked to and use your own clear/close button component:

<Typeahead ... >
  {({ onClear, selected }) => (
    <div className="rbt-aux">
      {!!selected.length && <MyCloseButton onClick={onClear} />}
    </div>
  )}
</Typeahead>

Note that ClearButton isn't really anything special; it just encapsulates the markup and classnames for Bootstrap's Close Button into a component. Feel free to use your own button!