Example List decorator with onBlur and onFocus events

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react/dist/react-with-addons.min.js"></script>
    <script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/react-virtualized/styles.css">
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div id="example">
      <!-- This element's contents will be replaced with your code... -->
    </div>
    <script src="script.js"></script>
  </body>

</html>

const {List} = ReactVirtualized;
const {Component, PropTypes} = React;
const {findDOMNode} = ReactDOM;

// List data as an array of strings
const list = [
  'Brian Vaughn',
  'Bob Smith',
  'Someone Else',
  'I hate making up names'
  // And so on...
];

class ListWrapper extends Component {
  constructor(props, context) {
    super(props, context);

    this._onListBlur = this._onListBlur.bind(this);
    this._onListFocus = this._onListFocus.bind(this);
    this._setListRef = this._setListRef.bind(this);
  }

  render() {
    const props = Object.assign({}, this.props, {
      ref: this._setListRef
    });

    return React.createElement(List, props);
  }
  
  _setListRef(listRef) {
    if (this._listRef) {
      listRef.removeEventListener('blur', this._onListBlur);
      listRef.removeEventListener('focus', this._onListFocus);
    }

    this._listRef = listRef ? findDOMNode(listRef) : null;

    if (this._listRef) {
      this._listRef.addEventListener('blur', this._onListBlur);
      this._listRef.addEventListener('focus', this._onListFocus);
    }
  }
  
  _onListBlur(event) {
    const {onBlur} = this.props;

    if (typeof onBlur === 'function') {
      onBlur(event);
    }
  }
  
  _onListFocus() {
    const {onFocus} = this.props;

    if (typeof onFocus === 'function') {
      onFocus(event);
    }
  }
}

ListWrapper.propTypes = {
  onBlur: PropTypes.func,
  onFocus: PropTypes.func,
};

// Render your list
ReactDOM.render(
  <ListWrapper
    className='List'
    width={300}
    height={300}
    onBlur={() => console.log('List blurred')}
    onFocus={() => console.log('List focused')}
    rowCount={list.length}
    rowHeight={30}
    rowRenderer={
      ({ index, isScrolling, key, style }) => (
        <div
          className='Row'
          key={key}
          style={style}
        >
          {list[index]}
        </div>
      )
    }
  />,
  document.getElementById('example')
);

.List {
  border: 1px solid black;
  box-sizing: border-box;
}
.Row {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  box-sizing: border-box;
}