0.1.29 • Published 4 years ago
@belong-ui/select-dropdown v0.1.29
Examples:
Use this component for
- Placing a dropdown (For Navigation or Preferences Selection)
- Selecting a single value from options in form input.
initialState = {
selectedItem: null,
selectedFruits: [],
};
const suggestions = ['apple', 'orange', 'banana'];
<div>
<SelectDropdown
onSelect={(newValue) => {
setState({ selectedItem: newValue });
}}
items={suggestions}
renderSelectedItem={() => (
state.selectedItem ? state.selectedItem : (<span>Select Fruit</span>)
)}
/>
<br />
<br /><br />
<p>Disabled Dropdown</p>
<br />
<SelectDropdown
isDisabled
onSelect={(newValue) => {
setState({ selectedItem: newValue });
}}
items={suggestions}
renderSelectedItem={() => (
state.selectedItem ? state.selectedItem : (<span>Disabled Select Dropdown</span>)
)}
/>
<br />
<br /><br />
<p>Custom Rendering</p>
<br />
<SelectDropdown
onSelect={(newValue) => {
if (state.selectedFruits.indexOf(newValue) !== -1) {
setState({ selectedFruits: state.selectedFruits.filter((fruit) => (fruit !== newValue)) })
} else {
setState({ selectedFruits: [...state.selectedFruits, newValue] });
}
}}
items={suggestions}
renderSelectedItem={() => (
state.selectedFruits.length ? `${state.selectedFruits.length} fruits selected` : (<span>Select Fruits</span>)
)}
renderItem={(item, index) => (
<span>
{state.selectedFruits.indexOf(item) !== -1 ? <i className="fa fa-check-circle" /> : <i className="fa fa-circle" />} {item}
</span>
)}
/>
<br />
<br /><br />
<p>Usage as input (e.g. for forms)</p>
<br />
<SelectDropdown
className="styleguidist__dropdown"
isInput
onSelect={(newValue) => {
setState({ selectedItem: newValue });
}}
items={suggestions}
renderSelectedItem={() => (
state.selectedItem ? state.selectedItem : (<span>Select Fruit</span>)
)}
/>
<br />
<br /><br />
<p>Usage as input (Disabled)</p>
<br />
<SelectDropdown
className="styleguidist__dropdown"
isInput
isDisabled
onSelect={(newValue) => {
setState({ selectedItem: newValue });
}}
items={suggestions}
renderSelectedItem={() => (
state.selectedItem ? state.selectedItem : (<span>Select Fruit</span>)
)}
/>
</div>
0.1.29
4 years ago
0.1.28
4 years ago
0.1.27
4 years ago
0.1.26
4 years ago
0.1.25
4 years ago
0.1.24
4 years ago
0.1.23
4 years ago
0.1.22
4 years ago
0.1.21
4 years ago
0.1.20
4 years ago
0.1.19
4 years ago
0.1.18
4 years ago
0.1.17
4 years ago
0.1.16
4 years ago
0.1.15
4 years ago
0.1.14
4 years ago
0.1.13
4 years ago
0.1.12
4 years ago
0.1.11
4 years ago
0.1.10
4 years ago
0.1.9
4 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
6 years ago
0.1.0
6 years ago
0.0.16
6 years ago
0.0.15
6 years ago
0.0.14
6 years ago
0.0.13
6 years ago
0.0.12
6 years ago
0.0.11
6 years ago