react-textarea-with-suggest
Textarea with suggest for React app v2
Last changes
Demo
Install
If you use npm
npm install --save react-textarea-with-suggest
or
yarn add react-textarea-with-suggest
Usage
To use built-in styles
import "react-textarea-with-suggest/lib/styles.css";
For functional component
import Textarea from "react-textarea-with-suggest";
const MyApp = (props) => {
const [text, setText] = useState<string>("")
const { results, search } = useMyOwnSearchResults();
return <Textarea
className="myapp-textarea"
value={text}
onChange={({ target }) => setText({ target.value })}
onSearch={(searchPhrase) => search(searchPhrase)}
suggestList={results}
searchMarker="@"
autoFocus
/>
}
For class component
import Textarea from "react-textarea-with-suggest";
import { search } from "../actions"
export default class MyApp extends React.Component {
state = { text: "" };
render () {
return <Textarea
className="myapp-textarea"
value={text}
onChange={({ target }) => this.setState({ text: target.value })}
onSearch={(params) => this.props.search(params)}
searchMarker="@"
autoFocus
/>
}
}
Params
Name | Default value | Required | Description |
---|---|---|---|
autosizable | boolean: false | no | using <TextareaAutosize> instead of <textarea> if true |
value | string: "" | no | initial text value for <textarea>
|
className | string: "" | no | className property for <textarea> element |
searchMarker | char: "@" | no | after this symbol will be inited search and onSearch function |
searchRegexp | string: /@([a-z0\d-.]+[a-z\d])/gim | no | default RegExp to detect search phrase after searchMarker |
closeSuggestOnFocusOut | boolean: false | no | closes suggest on focusout and returns back on focusin
|
cancelSearchOnFocusOut | boolean: false | no | cancelling search on focusout
|
onChange | func: (event: React.ChangeEvent) => {} | no | function on change value in textarea |
onSearch | func: (searchPhrase: string) => {} | yes | function after input of searchMarker into textarea |
suggestList | array: (string OR CustomType)[]: [] | no | rendering suggest when suggestList isn't empty, items rendering in customSuggestItemRenderer function |
customSuggestItemRenderer | func: (searchListItem: string OR CustomType, isSelected: boolean) => ReactNode | no | custom function for rendering each item in suggest, second argument is true if user navigates through items by keyboard and stops on current element |
//customSuggestItemRenderer
(item) =>
<div className="textarea-suggest-item" onClick={myOwnClickHandler}>
<div className="textarea-suggest-item__info">
<div>{item.name}</div>
<div>{item.description}</div>
</div>
</div>
any else params for <textarea>
|
- | - | https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes |
Using libraries
- "react-textarea-autosize" (optionally)
License
Copyright (c) 2019 Mariia Lobareva Licensed under the The MIT License (MIT).