Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reactjs/react-autocomplete
WAI-ARIA compliant React autocomplete (combobox) component
https://github.com/reactjs/react-autocomplete
Last synced: 4 months ago
JSON representation
WAI-ARIA compliant React autocomplete (combobox) component
- Host: GitHub
- URL: https://github.com/reactjs/react-autocomplete
- Owner: reactjs
- License: mit
- Archived: true
- Created: 2014-06-09T06:38:01.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2019-06-06T17:14:08.000Z (over 5 years ago)
- Last Synced: 2024-05-21T04:15:49.301Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 3.49 MB
- Stars: 2,161
- Watchers: 43
- Forks: 528
- Open Issues: 91
-
Metadata Files:
- Readme: README-template.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-cn - react-autocomplete by @rackt - WAI-ARIA compliant React autocomplete (Archived, read-only) (Uncategorized / Uncategorized)
README
# React Autocomplete [](https://travis-ci.org/reactjs/react-autocomplete/)
Accessible, extensible, Autocomplete for React.js.
```jsx
item.label}
items={[
{ label: 'apple' },
{ label: 'banana' },
{ label: 'pear' }
]}
renderItem={(item, isHighlighted) =>
{item.label}
}
value={value}
onChange={(e) => value = e.target.value}
onSelect={(val) => value = val}
/>
```
Check out [more examples](https://reactcommunity.org/react-autocomplete/) and get stuck right in with the [online editor](http://jsbin.com/mipesawapi/edit?js,output).
## Install
### npm
```bash
npm install --save react-autocomplete
```
### yarn
```bash
yarn add react-autocomplete
```
### AMD/UMD
* Development: [https://unpkg.com/react-autocomplete@${VERSION}/dist/react-autocomplete.js](https://unpkg.com/react-autocomplete@${VERSION}/dist/react-autocomplete.js)
* Production: [https://unpkg.com/react-autocomplete@${VERSION}/dist/react-autocomplete.min.js](https://unpkg.com/react-autocomplete@${VERSION}/dist/react-autocomplete.min.js)
## API
### Props
${API_DOC}
### Imperative API
In addition to the props there is an API available on the mounted element which is similar to that of `HTMLInputElement`. In other words: you can access most of the common `` methods directly on an `Autocomplete` instance. An example:
```jsx
class MyComponent extends Component {
componentDidMount() {
// Focus the input and select "world"
this.input.focus()
this.input.setSelectionRange(6, 11)
}
render() {
return (
this.input = el}
value="hello world"
...
/>
)
}
}
```
# Development
You can start a local development environment with `npm start`. This command starts a static file server on [localhost:8080](http://localhost:8080) which serves the examples in `examples/`. Hot-reload mechanisms are in place which means you don't have to refresh the page or restart the build for changes to take effect.
## Tests!
Run them:
`npm test`
Write them:
`lib/__tests__/Autocomplete-test.js`
Check your work:
`npm run coverage`
## Scripts
Run with `npm run `.
### gh-pages
Builds the examples and assembles a commit which is pushed to `origin/gh-pages`, then cleans up your working directory. Note: This script will `git checkout master` before building.
### release
Takes the same argument as `npm publish`, i.e. `[major|minor|patch|x.x.x]`, then tags a new version, publishes, and pushes the version commit and tag to `origin/master`. Usage: `npm run release -- [major|minor|patch|x.x.x]`. Remember to update the CHANGELOG before releasing!
### build
Runs the build scripts detailed below.
### build:component
Transpiles the source in `lib/` and outputs it to `build/`, as well as creating a UMD bundle in `dist/`.
### build:examples
Creates bundles for each of the examples, which is used for pushing to `origin/gh-pages`.
### test
Runs the test scripts detailed below.
### test:lint
Runs `eslint` on the source.
### test:jest
Runs the unit tests with `jest`.
### coverage
Runs the unit tests and creates a code coverage report.
### start
Builds all the examples and starts a static file server on [localhost:8080](http://localhost:8080). Any changes made to `lib/Autocomplete.js` and the examples are automatically compiled and transmitted to the browser, i.e. there's no need to refresh the page or restart the build during development. This script is the perfect companion when making changes to this repo, since you can use the examples as a test-bed for development.