title: How to add custom completer in react ace editor from outside of language_tools
body: <p>How to add custom completer in react based ace editor from index.js using functions like addCompleter or setCompleter</p>
  
  <pre><code>import { render } from "react-dom";
  import AceEditor from "../src/ace";
  import "brace/mode/jsx";
  import 'brace/mode/HCPCustomCalcs'
  import 'brace/theme/monokai'
  import "brace/snippets/HCPCustomCalcs";
  import "brace/ext/language_tools";
  const defaultValue = `function onLoad(editor) {
    console.log("i've loaded");
  }`;
  class App extends Component {
  
    constructor(props, context) {
      super(props, context);
      this.onChange = this.onChange.bind(this);
  }
  onChange(newValue) {
      console.log('changes:', newValue);
  }
    render() {
  
        return (
            &lt;div&gt;
                &lt;AceEditor
                    mode="HCPCustomCalcs"
                    theme="monokai"
                    width={ '100%' }
                    height={ '100vh' }
                    onChange={this.onChange}
                    name="UNIQUE_ID_OF_DIV"
                    editorProps={{
                        $blockScrolling: true
                    }}
                    enableBasicAutocompletion={true}
                    enableLiveAutocompletion={true}
                    enableSnippets={true}
                /&gt;
            &lt;/div&gt;
        );
    }
  }
  render(&lt;App /&gt;, document.getElementById("example"));
  </code></pre>
  
  <p>i want to add my custom completer from here.my completer is something like this    </p>
  
  <pre><code>var myCompleter ={
  getCompletions: function(editor, session, pos, prefix, callback) {
          var completions = [];
          ["word1", "word2"].forEach(function(w) {
  
              completions.push({
                  value: w,
                  meta: "my completion",
  
              });
          });
          callback(null, completions);
      }
  })}
  </code></pre>
  
  <p>In normal Ace-editor it was straight forward.By simply calling </p>
  
  <pre><code>var langTools = ace.require("ace/ext/language_tools")
  langTools.addCompleter(myCompleter1);```
  </code></pre>