title: How to conditionally display items on top when no room below with react-select 2
body: <p>Using react-select 2, I'm trying to figure out the best way to display the opening direction, depending where on the page (and in the viewport) the select element is.</p>
  
  <p>I've considered using the <code>onMenuOpen</code> prop to check how much space is below the select component and then add a class name when required - and handle the positioning in CSS, but I'm worried that could end up in an infinite loop.</p>
  
  <p>The <code>menuPlacement</code> prop on its own won't work, as that will control the direction for all times, not when the component is near the bottom of the viewport (or conversely near the top of the viewport).</p>
  
  <p>Does anyone know what I could do?</p>