4 ms·

> With care put in to how larger components are designed, it's possible (I've done it) to swap out sub components to customize behavior on a per-instance basis.

• grayrest 11y ago
  The basic idea is to have your components take optional params that are themselves components. ESPseudoish code: // In your components... let DefaultListItem = (content) => <li className="foo">{content}</li> let DefaultList = (items, Li=DefaultListItem) => <ul>{items.map(Li)}</ul> let SortableItem = (content) => <li className="handle" on-drag={(e) => dispatch('dragStart', hash(content))>{content}</li> let SortableList = (items, Li=SortableItem) => <DefaultList {...this.props} /> let EditableList = (items, List=DefaultList, Li=SortableItem) => { <div><List {...this.props} /><button>Edit</button></div> } let SearchResultHighlighter = (text) => <span className="imagine-this-highlighted">{text}</span> // -- In use... let source = ['foo', 'bar', 'baz'] render(<SortableList items={ source.map(SearchResultHighlighter) } />) let ImageItem = (url) => <li><img src={url} /></li> render(<EditableList items={ source.map(x => x + '.jpg') } Li={ImageItem} />) There's a lot of design space to play around with. For a widely reusable library, I want something like Clojure's protocols or Rust's traits so I can indicate to people what the component needs/provides without them looking at the source.
  • Flenser 11y ago
    Thanks. I've been thinking about the component provides/needs issue as well. I was thinking of wrapping any passed in sub-component in "polyfill / rewire" component created from a factory that can be passed the propTypes that the parent component expects it's child to support and a map from props it will be passed to the props it actually supports. Ideally I'd like to be able to do something like switch between react-material and react-bootstrap on the fly.