Use search icon with react-select v2
Anyone have any idea how to use a custom icon with react-select v2? Version 1 used to have an arrowRenderer prop that you could pass in with a function that would render something different. That doesn't seem to be working on v2.
Here's what I have currently:
renderSearchIcon = () => (
<svg {...svgProps}>
<path d={path} />
</svg>
)
<Select
{...this.props}
arrowRenderer={this.renderSearchIcon}
defaultValue={defaultValue}
options={options}
onChange={onSelectChange}
/>
But for some reason I'm still getting the default down chevron. Anyone know if it's possible to do this on v2?
reactjs react-select
asked Dec 28 '18 at 0:34
kainos90
5016
add a comment |
Anyone have any idea how to use a custom icon with react-select v2? Version 1 used to have an arrowRenderer prop that you could pass in with a function that would render something different. That doesn't seem to be working on v2.
Here's what I have currently:
renderSearchIcon = () => (
<svg {...svgProps}>
<path d={path} />
</svg>
)
<Select
{...this.props}
arrowRenderer={this.renderSearchIcon}
defaultValue={defaultValue}
options={options}
onChange={onSelectChange}
/>
But for some reason I'm still getting the default down chevron. Anyone know if it's possible to do this on v2?
reactjs react-select
asked Dec 28 '18 at 0:34
kainos90
5016
add a comment |
Anyone have any idea how to use a custom icon with react-select v2? Version 1 used to have an arrowRenderer prop that you could pass in with a function that would render something different. That doesn't seem to be working on v2.
Here's what I have currently:
renderSearchIcon = () => (
<svg {...svgProps}>
<path d={path} />
</svg>
)
<Select
{...this.props}
arrowRenderer={this.renderSearchIcon}
defaultValue={defaultValue}
options={options}
onChange={onSelectChange}
/>
But for some reason I'm still getting the default down chevron. Anyone know if it's possible to do this on v2?
reactjs react-select
asked Dec 28 '18 at 0:34
kainos90
5016
Anyone have any idea how to use a custom icon with react-select v2? Version 1 used to have an arrowRenderer prop that you could pass in with a function that would render something different. That doesn't seem to be working on v2.
Here's what I have currently:
renderSearchIcon = () => (
<svg {...svgProps}>
<path d={path} />
</svg>
)
<Select
{...this.props}
arrowRenderer={this.renderSearchIcon}
defaultValue={defaultValue}
options={options}
onChange={onSelectChange}
/>
But for some reason I'm still getting the default down chevron. Anyone know if it's possible to do this on v2?
reactjs react-select
reactjs react-select
asked Dec 28 '18 at 0:34
kainos90
5016
asked Dec 28 '18 at 0:34
kainos90
5016
asked Dec 28 '18 at 0:34
kainos90
5016
asked Dec 28 '18 at 0:34
kainos90
5016
asked Dec 28 '18 at 0:34
kainos90
5016
5016
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
https://github.com/JedWatson/react-select/issues/685#issuecomment-420213835
https://react-select.com/components
Sample snippet:
import Select, { components } from 'react-select';
const DropdownIndicator = props => {
return (
components.DropdownIndicator && (
<components.DropdownIndicator {...props}>
<FontAwesomeIcon icon={props.selectProps.menuIsOpen ? "caret-up" : "caret-down"}/>
</components.DropdownIndicator>
)
);
};
<Select
components={{ DropdownIndicator }}
// pass other props
/>
answered Dec 28 '18 at 0:39
varoons
33617
Perfect. I should have read the docs more carefully. Doh!
– kainos90
Dec 28 '18 at 3:36
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53952391%2fuse-search-icon-with-react-select-v2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
https://github.com/JedWatson/react-select/issues/685#issuecomment-420213835
https://react-select.com/components
Sample snippet:
import Select, { components } from 'react-select';
const DropdownIndicator = props => {
return (
components.DropdownIndicator && (
<components.DropdownIndicator {...props}>
<FontAwesomeIcon icon={props.selectProps.menuIsOpen ? "caret-up" : "caret-down"}/>
</components.DropdownIndicator>
)
);
};
<Select
components={{ DropdownIndicator }}
// pass other props
/>
answered Dec 28 '18 at 0:39
varoons
33617
Perfect. I should have read the docs more carefully. Doh!
– kainos90
Dec 28 '18 at 3:36
add a comment |
https://github.com/JedWatson/react-select/issues/685#issuecomment-420213835
https://react-select.com/components
Sample snippet:
import Select, { components } from 'react-select';
const DropdownIndicator = props => {
return (
components.DropdownIndicator && (
<components.DropdownIndicator {...props}>
<FontAwesomeIcon icon={props.selectProps.menuIsOpen ? "caret-up" : "caret-down"}/>
</components.DropdownIndicator>
)
);
};
<Select
components={{ DropdownIndicator }}
// pass other props
/>
answered Dec 28 '18 at 0:39
varoons
33617
Perfect. I should have read the docs more carefully. Doh!
– kainos90
Dec 28 '18 at 3:36
add a comment |
https://github.com/JedWatson/react-select/issues/685#issuecomment-420213835
https://react-select.com/components
Sample snippet:
import Select, { components } from 'react-select';
const DropdownIndicator = props => {
return (
components.DropdownIndicator && (
<components.DropdownIndicator {...props}>
<FontAwesomeIcon icon={props.selectProps.menuIsOpen ? "caret-up" : "caret-down"}/>
</components.DropdownIndicator>
)
);
};
<Select
components={{ DropdownIndicator }}
// pass other props
/>
answered Dec 28 '18 at 0:39
varoons
33617
https://github.com/JedWatson/react-select/issues/685#issuecomment-420213835
https://react-select.com/components
Sample snippet:
import Select, { components } from 'react-select';
const DropdownIndicator = props => {
return (
components.DropdownIndicator && (
<components.DropdownIndicator {...props}>
<FontAwesomeIcon icon={props.selectProps.menuIsOpen ? "caret-up" : "caret-down"}/>
</components.DropdownIndicator>
)
);
};
<Select
components={{ DropdownIndicator }}
// pass other props
/>
answered Dec 28 '18 at 0:39
varoons
33617
edited Dec 28 '18 at 0:44
answered Dec 28 '18 at 0:39
varoons
33617
answered Dec 28 '18 at 0:39
varoons
33617
answered Dec 28 '18 at 0:39
varoons
33617
33617
Perfect. I should have read the docs more carefully. Doh!
– kainos90
Dec 28 '18 at 3:36
add a comment |
Perfect. I should have read the docs more carefully. Doh!
– kainos90
Dec 28 '18 at 3:36
Perfect. I should have read the docs more carefully. Doh!
– kainos90
Dec 28 '18 at 3:36
Perfect. I should have read the docs more carefully. Doh!
– kainos90
Dec 28 '18 at 3:36
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53952391%2fuse-search-icon-with-react-select-v2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
