Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow using other icons not only arrow #1176

Closed
BreahnaDavid opened this issue Aug 27, 2016 · 2 comments
Closed

Allow using other icons not only arrow #1176

BreahnaDavid opened this issue Aug 27, 2016 · 2 comments
Assignees

Comments

@BreahnaDavid
Copy link

I need to use a magnifier instead of arrow at the right of select-input.
So i hid through css select Select-arrow then spend time to align
bootstrap icon instead of arrow ( fa fa-search fa-lg). It would be very useful if we can pass own class instead ofSelect-arrow`.

I want to start working on it, if it is possible.
Thank you

@bvaughn
Copy link
Collaborator

bvaughn commented Sep 4, 2016

Added support via PR #1191. This can be done by specifying your own renderer (in a similar way as optionRenderer, menuRenderer, etc.):

function arrowRenderer () {
  return (
    <span>+</span>
  );
}

function render () {
  return (
    <Select
      arrowRenderer={arrowRenderer}
      {...otherProps}
    />
  );
}

@bvaughn bvaughn closed this as completed Sep 4, 2016
@topher515
Copy link

If anyone gets here via google, note that after v2.0.0, arrowRenderer no longer exists and instead you use "components" system to make this change.

See the "Dropdown Indicator" example at https://react-select.com/components#replaceable-components

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants