font-awesomereact-bootstrap-typeahead

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


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?


Solution

  • 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!