react-mention-trigger
it triggers suggestions when user enters " @ ", User can chose one of the suggestions and also it allow user to search space separated key
Install
npm install --save react-mention-trigger
Demo
go to https://github.com/dananjayag/react-mention-trigger#readme
Usage
import React Component from 'react' import SingleLineMention from 'react-mention-trigger' { // it is hard coded data, actual world you should make an API call to get data and need to pass it to SingleLineMention component thisstate= data:"an t b""asda""a""abbn" } { //Here you should call API and change this.state.data value console } { /* Add styles inputClassName={"input-red"} suggestionClassName={"suggestion"} activeClassname={"active"} suggestionsHolder={"suggestionsHolder"} */ return <div => <SingleLineMention = = = = = = = = =/> </div> }
Required props
data={this.state.data}//Data from Store
fontSize={18}
InputWidth={580}
onChange={this.onChange} // Chnage the data based on value entered (Filter)
waitTime={100} //Debounce Time
Styling
# use these classes for styling and customization
#suggestion
.suggestion{
background-color: bisque;
border: 1px solid;
}
#active suggestion
.active{
background-color: blueviolet;
color: #fff;
border: 1px solid;
}
#suggestions parent styling
.suggestionsHolder{
background-color: black
}
#input element Styling
.input-red{
background-color: azure;
color:red;
border-radius: 2px;
}
License
MIT © dananjayag