Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-autocomplete

Package Overview
Dependencies
Maintainers
2
Versions
45
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-autocomplete - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

lib/__tests__/Autocomplete-test.js

36

package.json
{
"name": "react-autocomplete",
"version": "0.0.2",
"description": "",
"main": "lib/main.js",
"scripts": {
"test": "echo \"no tests yet, just trust me\" && exit 0"
"version": "0.1.0",
"description": "Accessible, extensible, Autocomplete for React.js",
"main": "./lib/index.js",
"repository": {
"type": "git",
"url": "https://github.com/rackt/react-autocomplete.git"
},
"author": "",
"homepage": "https://github.com/rackt/react-autocomplete",
"bugs": "https://github.com/rackt/react-autocomplete/issues",
"directories": {
"example": "examples"
},
"authors": [
"Ryan Florence <rpflorence@gmail.com>"
],
"license": "MIT",
"dependencies": {
"react": "^0.10.0"
},
"devDependencies": {
"jsx-loader": "^0.10.2",
"webpack": "^1.3.0-beta5",
"rf-release": "^0.1.2"
},
"tags": [

@@ -24,3 +24,7 @@ "react",

"a11y"
]
}
],
"keywords": [],
"dependencies": {
"dom-scroll-into-view": "1.0.1"
}
}

@@ -1,74 +0,7 @@

react-autocomplete (combobox)
=============================
React Autocomplete
==================
[WAI-ARIA][wai-aria] accessible [React][react] autocomplete component (combobox).
Accessible, extensible, Autocomplete for React.js.
Installation
------------
Docs coming soon, for now just look at the `propTypes` and examples :)
`npm install react-autocomplete`
Demo
----
http://rpflorence.github.io/react-autocomplete/example/
Usage
-----
```js
var Autocomplete = require('react-autocomplete');
// its actually called a combobox, but noboby searches for that
var Combobox = Autocomplete.Combobox;
var Option = Autocomplete.Option;
var comboboxinItUp = (
// Just like <select><option/></select>, this component is a
// composite component. This gives you complete control over
// What is displayed inside the <Option>s as well as allowing
// you to render whatever you want inside, like a "no results"
// message that isn't interactive like the <Options> are.
// Start with the <Combobox/> and give it some handlers.
<Combobox
onInput={handleInput}
onSelect={handleSelect}
autocomplete="both"
>
// `onInput` is called when the user is typing, it gets passed the
// value from the input. This is your chance to filter the Options
// and redraw. More realistically, you'd make a request to get data
// and then redraw when it lands.
//
// `onSelect` is called when the user makes a selection, you probably
// want to reset the Options to your full dataset again, or maybe
// deal with the value and then clear it out if this is used to
// populate a list.
//
// `autocomplete` defaults to 'both'. 'inline' will autocomplete the
// first matched Option into the input value, 'list' will display a
// list of choices, and of course, both does both.
// When this option is selected, `onSelect` will be called with the
// value `"foo"`.
<Option value="foo">Foo</Option>
// `label` is the text to display in the input when the Option is
// selected. It defaults to the content of the Option just like a
// real <option>. (Maybe the value should too, now that I'm writing
// this, but it doesn't yet)
<Option value="bar" label="not bar at all">Bar</Option>
</Combobox>
);
```
This is not realistic code, check out the examples directory for a real
implementation.
[wai-aria]:http://www.w3.org/TR/wai-aria/roles#combobox
[react]:http://facebook.github.io/react/
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc