Allow custom components to be used instead of standard <textarea/> (#113

)

* Allow custom components to be used instead of standard <textarea/>

* ability to specify ref in textAreaComponent prop

* Fixed lint and Flow

* Added sdistefano into contributors

.all-contributorsrc

@@ -164,6 +164,15 @@
         "bug",
         "code"
       ]
+    },
+    {
+      "login": "sdistefano",
+      "name": "Silvio Di Stefano",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/600021?v=4",
+      "profile": "http://sites.google.com/site/sdistefano/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoType": "github"

README.md

@@ -5,7 +5,7 @@ Enhanced textarea to achieve autocomplete functionality.
 
 [![MIT License][license-badge]][license]
 [![PRs Welcome][prs-badge]](#Development)
-[![All Contributors](https://img.shields.io/badge/all_contributors-16-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-17-orange.svg?style=flat-square)](#contributors)
 [![npm](https://img.shields.io/npm/dw/@webscopeio/react-textarea-autocomplete.svg?style=flat-square)](https://www.npmjs.com/package/@webscopeio/react-textarea-autocomplete)
 
 <hr>
@@ -266,7 +266,7 @@ Also, I'd love to thank these wonderful people for their contribution ([emoji ke
 | [<img src="https://avatars3.githubusercontent.com/u/8135252?v=4" width="100px;"/><br /><sub><b>Jakub Beneš</b></sub>](https://jukben.cz)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=jukben "Code") [📖](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=jukben "Documentation") [🎨](#design-jukben "Design") [🤔](#ideas-jukben "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/3114719?v=4" width="100px;"/><br /><sub><b>Andrey Taktaev</b></sub>](https://github.com/JokerNN)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=JokerNN "Code") | [<img src="https://avatars0.githubusercontent.com/u/10706203?v=4" width="100px;"/><br /><sub><b>Marcin Lichwała</b></sub>](https://github.com/marcinlichwala)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=marcinlichwala "Code") [📖](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=marcinlichwala "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/9276511?v=4" width="100px;"/><br /><sub><b>Davidson Nascimento</b></sub>](https://github.com/davidsonsns)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=davidsonsns "Code") | [<img src="https://avatars1.githubusercontent.com/u/7477359?v=4" width="100px;"/><br /><sub><b>KajMagnus</b></sub>](http://www.effectivediscussions.org/)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Akajmagnus "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=kajmagnus "Code") | [<img src="https://avatars2.githubusercontent.com/u/1083817?v=4" width="100px;"/><br /><sub><b>Ján Vorčák</b></sub>](https://twitter.com/janvorcak)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Ajvorcak "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=jvorcak "Code") | [<img src="https://avatars2.githubusercontent.com/u/9800850?v=4" width="100px;"/><br /><sub><b>Mateusz Burzyński</b></sub>](https://github.com/Andarist)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=Andarist "Code") [📦](#platform-Andarist "Packaging/porting to new platform") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars0.githubusercontent.com/u/35139777?v=4" width="100px;"/><br /><sub><b>Deepak Pai</b></sub>](https://github.com/debugpai2)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Adebugpai2 "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=debugpai2 "Code") | [<img src="https://avatars0.githubusercontent.com/u/2336595?v=4" width="100px;"/><br /><sub><b>Aleck Landgraf</b></sub>](http://aleck.me)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=alecklandgraf "Code") | [<img src="https://avatars3.githubusercontent.com/u/8123356?v=4" width="100px;"/><br /><sub><b>Serguei Okladnikov</b></sub>](https://github.com/oklas)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Aoklas "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=oklas "Code") | [<img src="https://avatars1.githubusercontent.com/u/2987177?v=4" width="100px;"/><br /><sub><b>Michal Zochowski</b></sub>](https://github.com/michauzo)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Amichauzo "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=michauzo "Code") | [<img src="https://avatars2.githubusercontent.com/u/1263650?v=4" width="100px;"/><br /><sub><b>Igor Sachivka</b></sub>](https://github.com/isachivka)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Aisachivka "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=isachivka "Code") | [<img src="https://avatars3.githubusercontent.com/u/13059204?v=4" width="100px;"/><br /><sub><b>Andrew Shini</b></sub>](https://github.com/superandrew213)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Asuperandrew213 "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=superandrew213 "Code") | [<img src="https://avatars3.githubusercontent.com/u/3250906?v=4" width="100px;"/><br /><sub><b>Rikesh Ramlochund</b></sub>](https://paperboat.io)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Arrikesh "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=rrikesh "Code") |
-| [<img src="https://avatars1.githubusercontent.com/u/983876?v=4" width="100px;"/><br /><sub><b>Matthew Hamilton</b></sub>](https://github.com/diogeneshamilton)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Adiogeneshamilton "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/12836237?v=4" width="100px;"/><br /><sub><b>Danila</b></sub>](https://github.com/O4epegb)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3AO4epegb "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=O4epegb "Code") |
+| [<img src="https://avatars1.githubusercontent.com/u/983876?v=4" width="100px;"/><br /><sub><b>Matthew Hamilton</b></sub>](https://github.com/diogeneshamilton)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3Adiogeneshamilton "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/12836237?v=4" width="100px;"/><br /><sub><b>Danila</b></sub>](https://github.com/O4epegb)<br />[🐛](https://github.com/webscopeio/react-textarea-autocomplete/issues?q=author%3AO4epegb "Bug reports") [💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=O4epegb "Code") | [<img src="https://avatars3.githubusercontent.com/u/600021?v=4" width="100px;"/><br /><sub><b>Silvio Di Stefano</b></sub>](http://sites.google.com/site/sdistefano/)<br />[💻](https://github.com/webscopeio/react-textarea-autocomplete/commits?author=sdistefano "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

src/Textarea.jsx

@@ -203,7 +203,8 @@ class ReactTextareaAutocomplete extends React.Component<
     value: null,
     minChar: 1,
     boundariesElement: "body",
-    scrollToItem: true
+    scrollToItem: true,
+    textAreaComponent: "textarea"
   };
 
   constructor(props: TextareaProps) {
@@ -615,7 +616,8 @@ class ReactTextareaAutocomplete extends React.Component<
       "loaderClassName",
       "dropdownStyle",
       "dropdownClassName",
-      "movePopupAsYouType"
+      "movePopupAsYouType",
+      "textAreaComponent"
     ];
 
     // eslint-disable-next-line
@@ -646,7 +648,6 @@ class ReactTextareaAutocomplete extends React.Component<
     const textarea = event.target;
     const { selectionEnd } = textarea;
     const value = textarea.value;
-
     this.lastValueBubbledEvent = value;
 
     if (onChange && event) {
@@ -884,7 +885,8 @@ class ReactTextareaAutocomplete extends React.Component<
       containerStyle,
       containerClassName,
       loaderStyle,
-      loaderClassName
+      loaderClassName,
+      textAreaComponent
     } = this.props;
     const {
       left,
@@ -897,6 +899,16 @@ class ReactTextareaAutocomplete extends React.Component<
 
     const isAutocompleteOpen = this._isAutocompleteOpen();
     const suggestionData = this._getSuggestions();
+    const extraAttrs = {};
+    let TextAreaComponent;
+    if (textAreaComponent.component) {
+      TextAreaComponent = textAreaComponent.component;
+      extraAttrs[textAreaComponent.ref] = x => {
+        this.textareaRef = x;
+      };
+    } else {
+      TextAreaComponent = textAreaComponent;
+    }
 
     return (
       <div
@@ -905,7 +917,7 @@ class ReactTextareaAutocomplete extends React.Component<
         } ${containerClassName || ""}`}
         style={containerStyle}
       >
-        <textarea
+        <TextAreaComponent
           {...this._cleanUpProps()}
           ref={ref => {
             this.props.innerRef && this.props.innerRef(ref);
@@ -922,6 +934,7 @@ class ReactTextareaAutocomplete extends React.Component<
           onBlur={this._onClickAndBlurHandler}
           value={value}
           style={style}
+          {...extraAttrs}
         />
         {isAutocompleteOpen && (
           <Autocomplete
@@ -1037,6 +1050,7 @@ ReactTextareaAutocomplete.propTypes = {
   onChange: PropTypes.func,
   onSelect: PropTypes.func,
   onBlur: PropTypes.func,
+  textAreaComponent: PropTypes.oneOf([PropTypes.string, PropTypes.Object]),
   movePopupAsYouType: PropTypes.bool,
   onCaretPositionChange: PropTypes.func,
   className: PropTypes.string,

src/types.js

@@ -65,6 +65,10 @@ export type triggerType = {
 export type TextareaProps = {
   trigger: triggerType,
   loadingComponent: React$StatelessFunctionalComponent<*>,
+  textAreaComponent: {
+    component: React$StatelessFunctionalComponent<*>,
+    ref: "string"
+  },
   onChange: ?(SyntheticEvent<*> | Event) => void,
   onSelect: ?(SyntheticEvent<*> | Event) => void,
   onBlur: ?(SyntheticEvent<*> | Event) => void,