(7) Github-style user suggestions using react-input-trigger

index.jsx

...

class App extends Component {
  ...
  
  toggleSuggestor(metaInformation) {
    const { hookType, cursor } = metaInformation;

    if (hookType === 'start') {
      this.setState({
        showSuggestor: true,
        left: cursor.left,
        top: cursor.top + cursor.height, // we need to add the cursor height so that the dropdown doesn't overlap with the `@`.
      });
    }
    
    if (hookType === 'cancel') {
      // reset the state

      this.setState({
        showSuggestor: false,
        left: null,
        top: null
      });
    }
  }
  
  render() {
    return (
      ...
        <InputTrigger
          trigger={{
            keyCode: 50,
            shiftKey: true,
          }}
          onStart={(metaData) => { this.toggleSuggestor(metaData); }}
          onCancel={(metaData) => { this.toggleSuggestor(metaData); }}
        >
          ...
        </InputTrigger>
        ...
    );
  }  
}
render(<App/>, document.getElementById('app'));