React Autocomplete
This autocomplete component built to show what render props pattern can do with react and how much it flexible.
Introduction
- An autocomplete react component to allow user to build dynamic dropdown or searchable items.
- This component is for learning how render-props pattern word in react-js.
- For production matter you can use "Downshift" component from paypal.
Examples
import React from "react";
import ReactDOM from "react-dom";
import { Autocomplete } from "@yazanaabed/react-autocomplete";
import styles from "./styles";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showDropdown: true,
items: [
{
username: "User1",
id: 1
},
{
username: "User2",
id: 2
}
],
selectedItem: []
};
}
filterItemsBySearchInput = inputValue => {
return this.state.items.filter(
item =>
!inputValue ||
item.username.toLowerCase().includes(inputValue.toLowerCase())
);
};
onSelectedItemChanged = selection => {
this.setState(prevState => {
console.log(prevState, selection);
let selectedItem = [...prevState.selectedItem];
let isItemFound = selectedItem.find(item => item.id === selection.id);
if (!isItemFound) {
selectedItem.push(selection);
}
return {
selectedItem
};
});
};
render() {
return (
<div className="App">
<Autocomplete
onChange={selection => this.onSelectedItemChanged(selection)}
>
{({
getContainerProps,
getItemProps,
getInputProps,
getMenuProps,
inputValue,
isOpen,
highlightedIndex
}) => {
let itemsFiltered = this.filterItemsBySearchInput(inputValue);
return (
<div
{...getContainerProps({ className: styles.dropdownContainer })}
>
<input
type="text"
{...getInputProps({
className: styles.dropdownInput
})}
/>
{isOpen ? (
<ul {...getMenuProps({ className: styles.menuDropdown })}>
{itemsFiltered.map((item, index) => (
<li {...getItemProps({ item, index })}>
<div
className={styles.dropdownItem}
style={{
backgroundColor:
highlightedIndex === index ? "#e0f4ea" : ""
}}
>
{index}
{item.username}
</div>
</li>
))}
{!itemsFiltered.length ? (
<li className={styles.noItemsFound}>
<h1 className={styles.notFoundTitle}>Not found.</h1>
</li>
) : null}
</ul>
) : null}
</div>
);
}}
</Autocomplete>
<h1 className={styles.title}>Here is the active items</h1>
<ul>
{this.state.selectedItem.map((item, index) => (
<li key={index}>{item.username}</li>
))}
</ul>
</div>
);
}
}
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Authors
- Yazan Aabed
- See also the list of contributors who participated in this project.
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Acknowledgments
- This component to learn more about react-js