The basic idea is to have your components take optional params that are themselves components. ESPseudoish code:<p><pre><code>    &#x2F;&#x2F; In your components...
    let DefaultListItem = (content) =&gt; &lt;li className=&quot;foo&quot;&gt;{content}&lt;&#x2F;li&gt;

    let DefaultList = (items, Li=DefaultListItem) =&gt; &lt;ul&gt;{items.map(Li)}&lt;&#x2F;ul&gt;

    let SortableItem = (content) =&gt; &lt;li className=&quot;handle&quot; on-drag={(e) =&gt; dispatch(&#x27;dragStart&#x27;, hash(content))&gt;{content}&lt;&#x2F;li&gt;

    let SortableList = (items, Li=SortableItem) =&gt; &lt;DefaultList {...this.props} &#x2F;&gt;

    let EditableList = (items, List=DefaultList, Li=SortableItem) =&gt; {
      &lt;div&gt;&lt;List {...this.props} &#x2F;&gt;&lt;button&gt;Edit&lt;&#x2F;button&gt;&lt;&#x2F;div&gt;
    }

    let SearchResultHighlighter = (text) =&gt; &lt;span className=&quot;imagine-this-highlighted&quot;&gt;{text}&lt;&#x2F;span&gt;

    &#x2F;&#x2F; -- In use...
    let source = [&#x27;foo&#x27;, &#x27;bar&#x27;, &#x27;baz&#x27;]
    render(&lt;SortableList items={ source.map(SearchResultHighlighter) } &#x2F;&gt;)

    let ImageItem = (url) =&gt; &lt;li&gt;&lt;img src={url} &#x2F;&gt;&lt;&#x2F;li&gt;
    render(&lt;EditableList items={ source.map(x =&gt; x + &#x27;.jpg&#x27;) } Li={ImageItem} &#x2F;&gt;)

</code></pre>
There&#x27;s a lot of design space to play around with. For a widely reusable library, I want something like Clojure&#x27;s protocols or Rust&#x27;s traits so I can indicate to people what the component needs&#x2F;provides without them looking at the source.