0.1.29 • Published 4 years ago
@belong-ui/suggestions v0.1.29
Suggestions Example
Suggestions is a set of components that can be used to build autocompelete/search UI components.
const suggestions = ['apple', 'orange', 'banana', 'mango', 'badam', 'grapes', 'pineapple', 'guava', 'pear'];
initialState = {
value: '',
isLoading: false,
filteredSuggstions: suggestions,
};
<div className="styleguidist__suggestions">
<Suggestions
suggestions={state.filteredSuggstions}
onSuggestionSelect={(value) => { window.alert(value); }}
>
<p>Suggestions Input</p>
<br />
<Suggestions.INPUT
placeholder="Search A Fruit"
value={state.value}
onChange={(value) => {
setState({ value, isLoading: true });
setTimeout(() => {
const filteredSuggstions = suggestions.filter(suggestion => (
suggestion.indexOf(value) !== -1 || !value
));
setState({ isLoading: false, filteredSuggstions });
}, 1200);
}}
/>
<br />
<br />
<p>Suggestions Wrap</p>
<br />
<div>
<Suggestions.CONTAINER
className="styleguidist__suggestions-wrap"
isLoading={state.isLoading}
messageIfEmpty="No Suggestions"
suggestionClassname="styleguidist__suggestion"
onSuggestionClick={suggestion => { window.alert(suggestion); }}
/>
</div>
</Suggestions>
</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
0.0.10
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago