react-select/examples/src/components/CustomRender.js

A Select control built with and for ReactJS

import React from 'react';
import Select from 'react-select';

var DisabledUpsellOptions = React.createClass({
	displayName: 'DisabledUpsellOptions',
	propTypes: {
		label: React.PropTypes.string,
	},
	getInitialState () {
		return {};
	},
	setValue (value) {
		this.setState({ value });
		console.log('Support level selected:', value.label);
	},
	renderLink: function() {
		return <a style={{ marginLeft: 5 }} href="/upgrade" target="_blank">Upgrade here!</a>;
	},
	renderOption: function(option) {
		return <span style={{ color: option.color }}>{option.label} {option.link}</span>;
	},
	renderValue: function(option) {
		return <strong style={{ color: option.color }}>{option.label}</strong>;
	},
	render: function() {
		var options = [
			{ label: 'Basic customer support', value: 'basic', color: '#E31864' },
			{ label: 'Premium customer support', value: 'premium', color: '#6216A3' },
			{ label: 'Pro customer support', value: 'pro', disabled: true, link: this.renderLink() },
		];
		return (
			<div className="section">
				<h3 className="section-heading">{this.props.label}</h3>
				<Select
					placeholder="Select your support level"
					options={options}
					optionRenderer={this.renderOption}
					onChange={this.setValue}
					value={this.state.value}
					valueRenderer={this.renderValue}
					/>
				<div className="hint">This demonstates custom render methods and links in disabled options</div>
			</div>
		);
	}
});
module.exports = DisabledUpsellOptions;