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:
to the Clear button?
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!