DOM processing

[RafalFilipek]

With some DOM processing we could create cool things. For example:

const html = `<div id="gallery">
  <p><img src="..." /></p>
  <p><img src="..." /></p>
  <p><img src="..." /></p>
</div>`;

const processDiv = (dom) => {
  // check if element is a gallery
  if (dom.attribs.id === 'gallery') {
    // grab all images
    const images = dom.children.map(e => e.children[0].attribs.src);
    // pass them as a attribute (`images` prop in fact)
    dom.attribs.images = images;
    // remove children while we don't need them
    dom.children = [];
    // set custom tag name to map it with `mapElements`
    dom.name = 'gallery';
    return dom;
  }
  return dom;
}

<JSXFromHTML 
  html={html} 
  processElements={{ div: processDiv }}
  mapElements={{ gallery: MyGallery }}
/>

class MyGallery ({ images }) => <div><SuperMegaGallery images={images} /></div>;