title: React - custom layout of children components
body: <p>I am writing a widget library and I want to give users the flexibility of using their own layouts.  For example, I have a <code>Tracker</code> widget which is responsible for keeping track of the current position of a point. Here is an outline of the use of <code>Tracker</code></p>
  
  <pre><code>&lt;Tracker initialPos={[0,0]}&gt; //&lt;-- holds state of current position
      &lt;TrackerPlot option={1} /&gt;
      &lt;TrackerPlot option={2} /&gt;
      &lt;TrackerPlot option={3} /&gt;
      ...
      &lt;TrackerPlot option={n} /&gt;
      &lt;TrackerControls /&gt;
  &lt;/Tracker&gt;
  </code></pre>
  
  <p>This is fine, but I'd like to give users of the library the additional flexibility to add custom layouts so they can position the Tracker Components where they like.  Something like:</p>
  
  <pre><code>&lt;Tracker initialPos={[0,0]}&gt;
    &lt;div class="USER-DEFINED-LAYOUT-PLOTS"&gt;
      &lt;TrackerPlot val={1} /&gt;
      &lt;TrackerPlot val={2} /&gt;
      &lt;TrackerPlot val={3} /&gt;
      ...
      &lt;TrackerPlot val={n} /&gt;
    &lt;/div&gt;
    &lt;div class="USER-DEFINED-LAYOUT-CONTROLS"&gt;
      &lt;TrackerControl /&gt;
    &lt;/div&gt;
  &lt;/Tracker&gt;
  </code></pre>
  
  <p>The problem is that I have been using children props as follows:</p>
  
  <pre><code>function Tracker(props){
    const [pos, setPos] = useState(props.initialPosition);
    const children = React.Children.map(props.children, child=&gt;{
     return React.cloneElement(child, {
        pos:pos
       });
    });
    return {children};
  }
  </code></pre>
  
  <p>If I give the flexibility to add the surrounding <code>&lt;div&gt;</code> then the above code accessing the children breaks. <strong>Is there a pattern/tool/design that will allow the users to define their own layout with children components</strong></p>