Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
react-autocomplete-input
Advanced tools
Autocomplete input field for React
Demo and playground are available here
import TextInput from 'react-autocomplete-input';
import 'react-autocomplete-input/dist/bundle.css';
<TextInput options={["apple", "apricot", "banana", "carrot"]} />
Note: All props are optional.
"textarea"
Widget for rendering input field
""
Initial text for input
false
Disables widget, i.e. during form submission
6
Defines how many options can be listed simultaneously. Show all matched options if maxOptions equals 0.
() => {}
Callback for requesting new options to support lazy-loading. If requestOnlyIfNoOptions
is true, then onRequestOptions
called only if no options are currently available. Otherwise onRequestOptions
is called every time text is changed and trigger
is found.
import React from 'react';
import TextInput from 'react-autocomplete-input';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleRequestOptions = this.handleRequestOptions.bind(this);
this.state = { options: ["apple", "apricot", "banana", "carror"] };
}
// text in input is "I want @ap"
handleRequestOptions(part) {
console.log(part); // -> "ap", which is part after trigger "@"
this.setState({ options: SOME_NEW_OPTION_ARRAY });
}
render() {
return <TextInput onRequestOptions={this.handleRequestOptions} options={this.state.options} />;
}
}
If true, will match options in the middle of the word as well
Popup horizontal offset
Popup vertical offset
[]
List of available options for autocomplete
^[a-zA-Z0-9_\-]+$
This regular expression checks if text after trigger
can be autocompleted or not. I.e. "@ap" matches the default regex as "ap" matches the regex, therefore library will try to find appropriate option. "@a$p" fails to match the regex as there is not "$" character in it, therefore library considering this string as irrelevant.
true
If requestOnlyIfNoOptions
is true, then onRequestOptions
called only if no options are currently available. Otherwise onRequestOptions
is called every time text is changed and trigger
is found.
[',', '.', '!', '?']
By default, after option is selected, it is inserted with following spacer
. If user inputs one of the characters from spaceRemovers
array, then spacer
is automatically removed. I.e. @apple ,|
is automatically changed to @apple, |
, where |
represents caret.
' '
Character which is inserted along with the selected option.
'@'
Character or string, which triggers showing autocompletion option list. '' and '@@' are both valid triggers. Keep in mind that user have to input at least one extra character to make option list available if empty trigger is used.
Only show autocompletion option list after this many characters have been typed after the trigger character.
''
Widget supports both controlling options: by value and by state. If you explicitly pass value
prop, you have to update it manually every time onChange
event is emitted. If you don't pass value
prop, then widget uses internal state for value manipulation.
By default styles are defined in "react-autocomplete-input/dist/bundle.css"
, however, you may define your custom styles instead for following entities:
ul.react-autocomplete-input
ul.react-autocomplete-input > li
ul.react-autocomplete-input > li.active
MIT (c) Yury Dymov
26th February 2019 - 1.0.10
FAQs
Autocomplete input field for React
The npm package react-autocomplete-input receives a total of 3,578 weekly downloads. As such, react-autocomplete-input popularity was classified as popular.
We found that react-autocomplete-input demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.