diff --git a/README.md b/README.md index e23e21d..4b67c36 100644 --- a/README.md +++ b/README.md @@ -124,6 +124,20 @@ findMentions: (val) => { **`placeholder: string`** placeholder for empty input. +**`onUpdateSuggestions: function`** This function will be called on the mention keyword change. You can use this property to fetch the list from the data source. + +```js + { + this.setState({ + users: fetchUsers(keyword) + }); + }} +... +/> +``` + **`renderMentionList: function`** If you want to render totally different list. You can use this property to provide alternative mention list renderer. It will be called with certain properties to controll the functionality of list. ```js diff --git a/src/Editor/index.js b/src/Editor/index.js index ef31dea..d8f51ab 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -26,7 +26,12 @@ export class Editor extends React.Component { onHideMentions: PropTypes.func, editorStyles: PropTypes.object, placeholder: PropTypes.string, - renderMentionList: PropTypes.func + renderMentionList: PropTypes.func, + onUpdateSuggestions: PropTypes.func + }; + + static defaultProps = { + onUpdateSuggestions: () => {} }; constructor(props) { @@ -135,6 +140,7 @@ export class Editor extends React.Component { this.setState({ keyword: lastKeyword }); + this.props.onUpdateSuggestions(lastKeyword); } resetTextbox() {