5.0.0 • Published 6 years ago
cf-component-select v5.0.0
cf-component-select
Cloudflare Select Component
Installation
Installation with yarn is recommended
$ yarn add cf-component-select
Usage
import React from 'react';
import { CodeBlock } from 'cf-component-code';
import { Select } from 'cf-component-select';
class SelectComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 1,
multiValue: [1, 3]
};
}
handleChange(value) {
this.setState({ value });
}
handleMultiChange(values) {
this.setState({
multiValue: values.map(selected => selected.value)
});
}
render() {
return (
<div>
<Select
label="Basic"
value={this.state.value}
options={[
{ value: 1, label: 'One' },
{ value: 2, label: 'Two', disabled: true },
{ value: 3, label: 'Three' }
]}
onChange={this.handleChange.bind(this)}
/>
<Select
searchable
label="Searchable"
value={this.state.value}
options={[
{ value: 1, label: 'One' },
{ value: 2, label: 'Two' },
{ value: 3, label: 'Three' }
]}
onChange={this.handleChange.bind(this)}
/>
<Select
searchable
multi
label="Searchable Multi"
value={this.state.multiValue}
options={[
{ value: 1, label: 'One' },
{ value: 2, label: 'Two' },
{ value: 3, label: 'Three' }
]}
onChange={this.handleMultiChange.bind(this)}
/>
<Select
disabled
label="Disabled"
value={this.state.value}
options={[
{ value: 1, label: 'One' },
{ value: 2, label: 'Two' },
{ value: 3, label: 'Three' }
]}
onChange={this.handleChange.bind(this)}
/>
<p>You can make Select searchable:</p>
<CodeBlock>{`<Select searchable .../>`}</CodeBlock>
<p>Or a multi-select:</p>
<CodeBlock>{`<Select multi .../>`}</CodeBlock>
<p>Or both!</p>
<CodeBlock>{`<Select searchable multi .../>`}</CodeBlock>
<p>Async and Creatable are also supported</p>
<CodeBlock>
{`<Select async .../>
<Select creatable .../>`}
</CodeBlock>
</div>
);
}
}
export default SelectComponent;
5.0.0
6 years ago
4.2.22
6 years ago
4.2.21
6 years ago
4.2.20
6 years ago
4.2.19
6 years ago
4.2.18
6 years ago
4.2.17
6 years ago
4.2.16
6 years ago
4.2.15
6 years ago
4.2.14
6 years ago
4.2.13
6 years ago
4.2.12
6 years ago
4.2.11
6 years ago
4.2.10
6 years ago
4.2.9
6 years ago
4.2.8
6 years ago
4.2.7
6 years ago
4.2.6
6 years ago
4.2.5
6 years ago
4.2.4
6 years ago
4.2.3
6 years ago
4.2.2
6 years ago
4.2.1
6 years ago
4.2.0
6 years ago
4.1.4
6 years ago
4.1.3
6 years ago
4.1.2
7 years ago
4.1.1
7 years ago
4.1.0
7 years ago
4.0.9
7 years ago
4.0.8
7 years ago
4.0.7
7 years ago
4.0.6
7 years ago
4.0.5
7 years ago
4.0.4
7 years ago
4.0.3
7 years ago
4.0.2
7 years ago
4.0.1
7 years ago
4.0.0
7 years ago
3.0.0
7 years ago
2.7.2
7 years ago
2.7.1
7 years ago
2.7.0
7 years ago
2.5.0
7 years ago
2.4.2
7 years ago
2.4.1
7 years ago
2.4.0
7 years ago
2.3.0
7 years ago
2.2.1
7 years ago
2.2.0
7 years ago
2.1.2
7 years ago
2.1.1
7 years ago
2.1.0
7 years ago
2.0.0
7 years ago
1.0.5
8 years ago
1.0.4
8 years ago
1.0.3
8 years ago
1.0.2
8 years ago
1.0.1
8 years ago
1.0.0
8 years ago