Fork of gist.github.com/AlexFrazer/aed3810407aaf23b23168449a7ef83bf to answer question

createSelectable.jsx

import * as React from 'react';
import {SelectableContext} from './Selectable';

export interface Props {
  selectableKey: string;
  children?: React.ReactNode;
}

export interface ComponentProps {
  selectableRef: React.Ref<HTMLElement>;
}
  
export default function createSelectable<TProps>(
  Wrapped: React.ComponentType<ComponentProps & TProps>
) {
  return function SelectableWrapper(props) {
    return (
      <SelectableContext.Consumer>
        {selectableContext => (
          <WrappedComponent {...this.props} selectableContext={selectableContext} />
        )}
      </SelectableContext.Consumer>
    );
  }
}

Selectable.jsx

import * as React from "react";
import * as rbush from "rbush";

export const SelectableContext = React.createContext();

export class SelectableGroup extends React.PureComponent {
  static defaultProps = {
    tolerance: 10
  };

  // Pass references to insert and remove nodes down via context
  selectableContext = {
    insert: this.insert,
    remove: this.remove
  };

  insert = (key: string, node: HTMLElement) => {
    this.nodes.set(key, node);
    this.tree.insert(createTreeNode(node));
  };

  remove = (key: string, node: HTMLElement) => {
    this.nodes.delete(key);
    this.tree.remove(createTreeNode(node), ({ key: a }, { key: b }) => a === b);
  };

  render() {
    return (
      // All descendants of this component can access this context via SelectableContext.Consumer
      <SelectableContext.Provider value={this.selectableContext}>
        <Container {...props} onMouseDown={this.onMouseDown}>
          {children}
        </Container>
      </SelectableContext.Provider>
    );
  }
}