https://github.com/sui-components/sui-autocompleted
React Autocompleted
https://github.com/sui-components/sui-autocompleted
site--es-platform team--es-pt-web-platform tier--2 vert--es-platform vert--es-platforms
Last synced: 8 months ago
JSON representation
React Autocompleted
- Host: GitHub
- URL: https://github.com/sui-components/sui-autocompleted
- Owner: SUI-Components
- Created: 2015-07-13T11:25:23.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:37:46.000Z (about 3 years ago)
- Last Synced: 2025-06-28T09:38:32.355Z (9 months ago)
- Topics: site--es-platform, team--es-pt-web-platform, tier--2, vert--es-platform, vert--es-platforms
- Language: JavaScript
- Homepage: http://sui-components.github.io/sui-autocompleted/
- Size: 1.44 MB
- Stars: 6
- Watchers: 47
- Forks: 4
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SUI-Autocompleted
React component that shows a list of suggestions under an input file when you start to write something.
It's based on the container component design ( [more info](https://medium.com/@learnreact/container-components-c0e67432e005) ).
## Demo page
- Checkout a Sui-Autocompleted component demo [here](http://sui-components.github.io/sui-autocompleted/).
or...
- Clone the repo and open `index.html` file inside `docs` folder
## Usage
```
import 'babel/polyfill';
import React from 'react';
import ReactDom from 'react-dom';
import AutocompletedContainer from './autocompleted-container';
import AutocompletedGithubUserContainer from './autocompleted-githubUsers-container';
import AutocompletedComponentContainer from './autocompleted-component-container';
import './style.scss';
import '../src/index.scss';
ReactDom.render(, document.getElementById('languages'));
ReactDom.render(, document.getElementById('github-users'));
ReactDom.render(, document.getElementById('component-container'));
```
## Component Properties
The component exposes the following props:
* placeholder (String): **Optional** Default text value for the input file when no key is pressed (placeholder value).
* suggests (Array): **Required** Array of SuggestionObjects. Te array contains the suggestions to show. If you don't want to show anything you have to send an empty array.
* handleChange (Function): **Required** This function is called everytime user change the input field value.
```javascript
const handleChange = function( inputFileValue ){ ... }
```
* handleSelect (Function): **Required** This function is called when one suggestion is selected (via click or enter pressed).
```javascript
const handleSelect = function( suggestionValue ){ ... }
```
* handleBlur (Function): This function is called everytime user exits the input.
* handleFocus (Function): This function is called everytime user focus on the input.
* selectFirstByDefault (Boolean): **Optional** It sets first position for the autocomplete default active option. Defaults to `true`.
* focus (Boolean): **Optional** It trigger focus in the input. Defaults to `false`.
and then you have to create containers which one setting that properties in the sui-autocompleted component. You can view an example of this kind of container in the [doc folder](https://github.com/scm-spain/sui-autocompleted/blob/master/docs/autocompleted-container.jsx).
### SuggestObject
An SuggestObject is a plain JS Object with these specials keys:
```javascript
{
'id': [Unique id for the suggestion],
'value': [value to be passed to the handleSelect callback function]
'content': [React Component] or [Text to be show in the UI]
'literal': [String] This key is REQUIRED only if you are using a ReactJS Component like a content. It is used to decide which text has to be put in the input text when this suggestion is selected, in other case content will be used,
}
```
### Theme
There are several classes in order to apply a theme to the component:
* sui-autocompleted
* sui-autocompleted-input
* sui-autocompleted-clear
* sui-autocompleted-results
* sui-autocompleted-item
* sui-autocompleted-item--active
The component exports a basic CSS that you can include from the package in the node_modules.
## Installation
To run the component and play with the examples you have to:
### Download files from GitHub repo.
* `$ git clone https://github.com/scm-spain/sui-autocompleted`
* `$ cd sui-autocompleted`
### Install dependencies.
* `$ npm install` // Install npm dependencies from package.json
### Launch the development environment.
* `$ npm run dev` // Run development environment
* Go to _localhost:8080_
## Bundle
In order to generate the bundle including all React dependencies and the component logic we need to bundle a single JS file running the following command:
```
$ npm run build
```
## JS Testing
Execute a complete test by running:
```
There are two options for executing tests:
* Single mode: `$ npm test`
* Watch mode: `$ npm run test:watch`
## Lint Testing
```
In addition, you can run specific test for linting JS and SASS:
SASS: (SASS linting rules specified in file `.scss-lint.yml`)
```
$ npm run lint:sass
```
## NPM
The SUI-Autocompleted component is available as a NPM package [here](https://www.npmjs.com/package/@schibstedspain/sui-autocompleted):
```
npm install @schibstedspain/sui-autocompleted`
```
## Environment Dependencies
To run the lint tasks we have dependencies of:
* [Ruby](https://www.ruby-lang.org/en/downloads/)
* [scss-lint](https://github.com/brigade/scss-lint)
If that tools are not installed you cant commit. Because the lint pass never will be ok.