Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yazaabed/react-autocomplete
This autocomplete component built to show what render props pattern can do with react and how much it flexible
https://github.com/yazaabed/react-autocomplete
autocomplete components react reactjs reactjs-components render-props state-management
Last synced: 5 days ago
JSON representation
This autocomplete component built to show what render props pattern can do with react and how much it flexible
- Host: GitHub
- URL: https://github.com/yazaabed/react-autocomplete
- Owner: yazaabed
- Created: 2018-10-04T10:27:45.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-01-03T10:55:51.000Z (almost 4 years ago)
- Last Synced: 2024-04-26T02:22:32.195Z (7 months ago)
- Topics: autocomplete, components, react, reactjs, reactjs-components, render-props, state-management
- Language: JavaScript
- Homepage: https://codesandbox.io/s/n7n10j53pl
- Size: 209 KB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://github.com/paypal/downshift).
### Examples
```javascript
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 (
this.onSelectedItemChanged(selection)}
>
{({
getContainerProps,
getItemProps,
getInputProps,
getMenuProps,
inputValue,
isOpen,
highlightedIndex
}) => {
let itemsFiltered = this.filterItemsBySearchInput(inputValue);
return (
{isOpen ? (
{itemsFiltered.map((item, index) => (
-
{index}
{item.username}
))}
{!itemsFiltered.length ? (
-
Not found.
) : null}
) : null}
);
}}
Here is the active items
{this.state.selectedItem.map((item, index) => (
- {item.username}
))}
);
}
}
```
## Contributing
Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.
## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags).
## Authors
* **Yazan Aabed**
* See also the list of [contributors](https://github.com/YazanAabeed/react-autocomplete/graphs/contributors) who participated in this project.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Acknowledgments
* This component to learn more about react-js