Skip to content

Improvement: Option label as a link#66

Merged
JedWatson merged 5 commits intoJedWatson:masterfrom
nomadrat:option-label-as-link
Feb 20, 2015
Merged

Improvement: Option label as a link#66
JedWatson merged 5 commits intoJedWatson:masterfrom
nomadrat:option-label-as-link

Conversation

@nomadrat
Copy link
Contributor

Hi there. In my projects i use your component and i want to suggest little improvement.

Description: Add more possibilities for developers to customize react-select component. For example: when a user clicks on the label, I want description page to be opened. We also wrap the label into <a> tag so the developer can customize it.

Parameter name Description Default value
onOptionLabelClick function (Object option, Object event) undefined

Usage example:

var SelectedValuesField = React.createClass({
    onLabelClick: function (option, event) {
        console.log(option.value);
    },

    render: function() {
        var ops = [
            { label: 'A238 - Account1', value: 'a238' },
            { label: 'Vanilla', value: 'vanilla' },
            { label: 'Strawberry', value: 'strawberry' },
            { label: 'Caramel', value: 'caramel' }
        ];

        return (
            <div>
                <label>{this.props.label}</label>
                <ReactSelect
                    onOptionLabelClick={this.onLabelClick}
                    value="a238,vanilla,strawberry"
                    multi={true}
                    options={ops} />
            </div>
        );
    }
});

Preview:
screen-shot-2015-02-18-at-11 55 12-am

@nomadrat nomadrat changed the title Option label as a link improvement Improvement: Option label as a link Feb 18, 2015
@JedWatson
Copy link
Owner

Thanks @dmitry-smirnov! This looks really good, and it's something I've been meaning to add myself.

JedWatson added a commit that referenced this pull request Feb 20, 2015
@JedWatson JedWatson merged commit b3d2564 into JedWatson:master Feb 20, 2015
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

Successfully merging this pull request may close these issues.

2 participants