Show HN: Convert any website into a React component

📰 Hacker News · alexdanilowicz

Hey HN, we built a Chrome Extension ( https://www.magicpatterns.com/extension ) that converts a snippet of any website to an isolated React component. Demo video: https://youtu.be/hutUYDkyE_A How it works: 1) Iterate through each node in the selected DOM tree, 2) For each element, find any matching CSS selectors / inline styles, 3) Use window.getComputedStyle to get the deterministic values, 4) Construct JSX It was pretty hard producing the minimal code necessary while maintaining the same visual look. To do this, we implemented things like abstracting out global styles, removing inherited styles, pulling out SVGs, deleting styles with no effect, and condensing styles into their shorthand properties. We dive into each of those optimizations here for fun: https://www.magicpatterns.com/blog/any-website-to-react-comp... One of the main reasons we cared so much about condensing down the styles was not only to make it more human-readabl

Published 4 Nov 2024
Read full article → ← Back to Reads