react-textarea-with-suggest

react-textarea-with-suggest

Textarea with suggest for React app v2

Last changes

You can find in CHANGELOG.md

Demo

You can try component here

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).