Skip to content

Commit 3a9f63b

Browse files
author
jfusco
committed
Adding initial README for documentation - fixing caseSensitive and fuzzy default values - updating peer dependencies and keywords
1 parent e789619 commit 3a9f63b

3 files changed

Lines changed: 197 additions & 6 deletions

File tree

‎README.md‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,195 @@
11
# react-autocomplete
22

3+
[![Build Status][build-image]][build-url]
4+
5+
[![peerDependency Status][peer-dep-image]][peer-dep-url]
6+
[![devDependency Status][dev-dep-image]][dev-dep-url]
7+
8+
[![MIT][mit-image]][mit-url]
9+
![npm][npm-version-image]
10+
311
> WAI-ARIA compliant React autocomplete component
12+
13+
## Usage
14+
Implementation of autocomplete. See [available options](#options) below.
15+
```js
16+
import React, { Component } from 'react';
17+
import { render } from 'react-dom';
18+
import Autocomplete from 'react-autocomplete';
19+
20+
class Application extends Component{
21+
constructor(props){
22+
super(props);
23+
24+
this.fruit = ['bananas', 'strawberries', 'blueberries', 'pineapples', 'apples', 'tomatos', 'mangos', 'oranges', 'grapes', 'Rasberries', 'Blackberries', 'starfruit'];
25+
}
26+
27+
onItemSelected(value){
28+
console.log(`${value} was selected`);
29+
}
30+
31+
render(){
32+
return (
33+
<div>
34+
<Autocomplete
35+
id="1"
36+
placeholder="Fruits"
37+
onSelected={this.onItemSelected.bind(this)} />
38+
</div>
39+
);
40+
}
41+
}
42+
43+
render(<Application />, document.getElementById('application'));
44+
```
45+
46+
<a name="options"></a>
47+
#### Options
48+
* **[`id`](#id)**
49+
* **[`placeholder`](#placeholder)**
50+
* **[`data`](#data)**
51+
* **[`value`](#value)**
52+
* **[`fuzzy`](#fuzzy)**
53+
* **[`clearValueOnSelect`](#clearValueOnSelect)**
54+
* **[`caseSensitive`](#caseSensitive)**
55+
* **[`onChange`](#onChange)**
56+
* **[`onSelected`](#onSelected)**
57+
58+
<a name="id"></a>
59+
##### id ~ required
60+
The unique `id` of the component - used for setting up accessibility
61+
```js
62+
<Autocomplete id="1" />
63+
```
64+
65+
<a name="placeholder"></a>
66+
##### placeholder ~ optional ~ default `null`
67+
A `string` used as placeholder text in the tags input field
68+
```js
69+
<Autocomplete placeholder="Fruits" />
70+
```
71+
72+
<a name="data"></a>
73+
##### data ~ optional ~ default `[]`
74+
An `array` of strings to be used as suggestions
75+
```js
76+
<Autocomplete data={['apples', 'bananas']} />
77+
```
78+
79+
<a name="value"></a>
80+
##### value ~ optional ~ default `''`
81+
A `string` to set the value of the input field
82+
```js
83+
<Autocomplete value="apples" />
84+
```
85+
86+
<a name="fuzzy"></a>
87+
##### fuzzy ~ optional ~ default `true`
88+
A `boolean` that enables fuzzy search
89+
```js
90+
<Autocomplete fuzzy={true} />
91+
```
92+
93+
<a name="clearValueOnSelect"></a>
94+
##### clearValueOnSelect ~ optional
95+
A `boolean` that allows the item to be cleared out of the input field upon selection
96+
```js
97+
<Autocomplete clearValueOnSelect={true} />
98+
```
99+
100+
<a name="caseSensitive"></a>
101+
##### caseSensitive ~ optional ~ default `false`
102+
An `boolean` that allows for case sensitive search
103+
```js
104+
<Auocomplete caseSensitive={false} />
105+
```
106+
107+
<a name="onChange"></a>
108+
##### onChange ~ optional
109+
A `method` fired when user changes the input value
110+
```js
111+
onInputChange(value) {
112+
console.log(`${value} is the value`);
113+
}
114+
115+
<Auocomplete onChange={this.onInputChange.bind(this)} />
116+
```
117+
118+
<a name="onSelected"></a>
119+
##### onSelected ~ optional
120+
A `method` fired when user changes the input value
121+
```js
122+
onItemSelected(value) {
123+
console.log(`${value} is the selected item`);
124+
}
125+
126+
<Auocomplete onSelected={this.onItemSelected.bind(this)} />
127+
```
128+
129+
## Styling
130+
#### Installation
131+
Import the main SCSS file in to your application SCSS files
132+
```scss
133+
@import "src/scss/components/react-autocomplete";
134+
```
135+
136+
There are a few variables set to `!default` that can be overriden. If you need to change it more just override the actual styles.
137+
138+
**Any overriden variables needs to go above the `@import` statement to take effect**
139+
```scss
140+
//-- Global UI
141+
$ac-base-width
142+
$ac-base-border-radius
143+
$ac-base-font-family
144+
145+
//-- Input field
146+
$ac-input-height
147+
$ac-input-width
148+
$ac-input-font-size
149+
$ac-input-border
150+
$ac-input-font-color
151+
$ac-input-background-color
152+
$ac-input-border-radius
153+
$ac-input-padding
154+
$ac-input-placeholder-color
155+
$ac-input-border-focus-color
156+
$ac-input-font-family
157+
$ac-input-typeahead-font-color
158+
159+
//-- Suggestion list
160+
$ac-slist-border-radius
161+
$ac-slist-background-color
162+
163+
//-- Suggestion
164+
$ac-s-mark-font-color
165+
$ac-s-mark-background
166+
$ac-s-mark-font-weight
167+
$ac-s-active-background-color
168+
$ac-s-active-font-color
169+
$ac-s-font-color
170+
$ac-s-font-size
171+
$ac-s-background-color
172+
$ac-s-font-family
173+
$ac-s-border
174+
$ac-s-padding
175+
```
176+
177+
If you don't care to override variables and just want to override actual styles you may choose to import the minified compiled version of the css instead
178+
```scss
179+
@import "dist/react-autocomplete.min.css";
180+
```
181+
182+
## Tests ##
183+
```
184+
npm test
185+
```
186+
187+
[build-image]: https://travis-ci.org/JFusco/react-autocomplete.svg?branch=master
188+
[build-url]: https://travis-ci.org/JFusco/react-autocomplete
189+
[mit-image]: https://img.shields.io/npm/l/react-autocomplete.svg?style=flat-square
190+
[mit-url]: https://github.com/JFusco/react-autocomplete/blob/master/LICENSE
191+
[npm-version-image]: https://img.shields.io/npm/v/npm.svg?maxAge=2592000
192+
[dev-dep-image]: https://david-dm.org/JFusco/react-autocomplete/dev-status.svg
193+
[dev-dep-url]: https://david-dm.org/JFusco/react-autocomplete#info=devDependencies
194+
[peer-dep-image]: https://david-dm.org/JFusco/react-autocomplete/peer-status.svg
195+
[peer-dep-url]: https://david-dm.org/JFusco/react-autocomplete#info=peerDependencies

‎package.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-autocomplete",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "WAI-ARIA compliant React autocomplete component",
55
"main": "dist-components/Autocomplete.js",
66
"license": "MIT",
@@ -16,10 +16,9 @@
1616
"react",
1717
"autocomplete",
1818
"suggestions",
19-
"autosuggestions",
19+
"autosuggest",
2020
"search",
21-
"react component",
22-
"es6"
21+
"react component"
2322
],
2423
"peerDependencies": {
2524
"react": "^15.3.0",

‎src/js/Autocomplete.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ class Autocomplete extends Component {
2929
static defaultProps = {
3030
data: [],
3131
value: '',
32-
fuzzy: false,
32+
fuzzy: true,
3333
placeholder: 'Search',
3434
clearValueOnSelect: false,
35-
caseSensitive: true
35+
caseSensitive: false
3636
};
3737

3838
state = {

0 commit comments

Comments
 (0)