@inthepocket/itp-rcc-autocomplete NPM

ITP AutoComplete component

Built on downshift. For now, this is a controlled component only. You'll have to pass the input value and handle the changes and manage the autocomplete items.

Usage

$ npm install @inthepocket/itp-rcc-autocomplete

Import (Typescript)

import { default as AutoComplete } from '@inthepocket/itp-rcc-autocomplete';

Import (ES)

import AutoComplete from '@inthepocket/itp-rcc-autocomplete';

JSX

<AutoComplete
  items={[{ value: 'Amsterdam' }, { value: 'Brussels' }]}
  name="city"
  onChange={({ value }) => { ... }}
  placeholder="City"
  size="small"
  type="search"
  value="Amsterdam"
/>

API documentation

AutoComplete

<AutoComplete
  items={[{ value: 'Amsterdam' }, { value: 'Brussels' }]}
  name="city"
  onChange={({ value }) => { ... }}
  placeholder="City"
  size="small"
  type="search"
  value="Amsterdam"
/>

Property	Description	Type	Default	Required
autoComplete	translates into autocomplete attribute on input element	boolean	'new-password'	No
hasRandomizedName	randomizes the input's name attribute as a workaround for Chrome's stubborn autofill / autocompletion	boolean	true	No
InputComponent	Input component	React.ReactNode	<input />	No
isDisabled	Disabled state	boolean	false	No
isLoading	Loading state	boolean	false	No
items	Dropdown items	Array	undefined	No
itemsToString	List item toString method	Function	item => (item && item.value)		'',	No
Loader	Loading state component	React.ReactNode	<span>Loading</span>	No
onChange	onChange event handler	Function	undefined	No
placeholder	input element placeholder text	String	''	No
prefixCss	Prefix for css classNames	String	'auto-complete'	No
size	'small'	'default'	'large'	String	'default'	No
styles	imported css module (if passed, prefixed classNames will be disabled), see styles property	Object	null	No
type	input element type: 'email'	'text'	'search'	String	'text'	No
value	input element value	String	''	No

Classnames (when not using the styles property - css module)

.itp-autocomplete { ... } // container
.itp-autocomplete--isLoading { ... } // container loading state
.itp-autocomplete--isOpen { ... } // container dropdown-opened state
.itp-autocomplete__input { ... } // text input container
.itp-autocomplete__list { ... } // dropdown list
.itp-autocomplete__listItem { ... } // dropdown list item
.itp-autocomplete__listItem--isHighlighted { ... } // dropdown list item highlighted state
.itp-autocomplete__listItem--isSelected { ... } // dropdown list item selected state
.itp-autocomplete__loader { ... } // loader element (mounted when isLoading property is true)

Styles property (when using the styles property - css module)

Property	Description	Type	Default	Required
autoComplete	Autocomplete container	string	-	No
input	Text input container	string	-	No
isHighlighted	Dropdown list item highlighted state	string	-	No
isLoading	Autocomplete container loading state	string	-	No
isOpen	Autocomplete container dropdown-opened state	string	-	No
isSelected	Dropdown list item selected state	string	-	No
list	Dropdown list	string	-	Yes
listItem	Dropdown list item	string	-	Yes
loader	Loader component	string	-	No

The css module should look like this:

.autoComplete { ... }
.input { ... }
.isHighlighted { ... }
.isLoading { ... }
.isOpen { ... }
.isSelected { ... }
.list { ... }
.listItem { ... }
.loader { ... }

DisableBrowserAutoComplete

Disables html form input autocomplete and autofill for every child on Chrome and Firefox. Based on https://gist.github.com/niksumeiko/360164708c3b326bd1c8

import { DisableBrowserAutoComplete } from '@inthepocket/itp-rcc-autocomplete';

usage:

<DisableBrowserAutoComplete>
  <AutoComplete />
  <input />
</DisableBrowserAutoComplete>

Development

Installation

$ npm install

Test

$ npm run test

Build

Compiles the TypeScript source to ES5.

$ npm run build

react itp

capitalize classnames downshift react

@infinitebrahmanuniverse/nolb-_inth @everything-registry/sub-chunk-467 @zalastax/nolb-_inth

6 years ago

6 years ago

6 years ago

6 years ago