[HN Gopher] Show HN: Paste React components into any website
___________________________________________________________________
Show HN: Paste React components into any website
Author : jimhi
Score : 66 points
Date : 2022-09-26 11:53 UTC (1 days ago)
(HTM) web link (smarketman.com)
(TXT) w3m dump (smarketman.com)
| armatav wrote:
| I can tell this will be a legitimately good niche product - just
| look at how many of the comments absolutely hate it or don't
| understand the use case.
| michaelchisari wrote:
| Really cool on a technical level, but part of me thinks good
| lord, is anyone out there working on making the web _simpler_
| instead of more complicated and magical?
| joshxyz wrote:
| I agree, to developers it's hilarious as fuck but looking at it
| from the perspective of non-technical users, there's gotta be a
| use-case for this
| joshxyz wrote:
| I think it can even go as far as converting code from other
| frameworks
|
| E.g. is it possible to import react components and vue
| components, there's gotta be a common ground format between
| those frameworks.
| codingdave wrote:
| I'm confused why you need a tool for this. If you are writing the
| react code, and adding the script to your web page... this tool
| just seems to be an alternative to webpack? It doesn't seem to be
| solving a technical problem as much as a knowledge problem - if
| you don't know how to build a React app, this might make it one
| step easier. Is that the intent?
| doix wrote:
| It's webpack as a service! I would have never guessed that
| there was a need for this, but maybe there is.
| codingdave wrote:
| Yeah, there probably is a niche that wants this - I would
| just expect that the people who know how to write the code
| for React component, but do not know how to bundle it to put
| on a page is not only a small niche, but an inherently
| shrinking niche -- why would someone learn to code, but then
| deliberately skip learning to deploy that code?
| programmarchy wrote:
| The use case is copy and pasting code, not learning how to
| write the code.
| jimhi wrote:
| It's also completely free for 1 library (which can be used on
| multiple websites) and you can download the bundle code at
| any time.
| doix wrote:
| My comment isn't a criticism! I was just confused what you
| were doing, but now I get it. You run webpack for people
| and then host the bundle for them. If the title was
| "Webpack as a service", I would've immediately got it. But
| I guess your target audience probably wouldn't so your
| title makes sense for the audience you're targeting + SEO.
|
| It would've never occurred to me to make something like
| this, but after searching for the terms you suggested
| below, I do see many people asking for this. Telling those
| people "just setup node/npm/webpack" is probably not
| helpful. Your service is easier for those people. Nice job
| identifying a solution for people with a problem!
| yCombLinks wrote:
| It would also be possible to embed components written by
| others without managing a build toolchain.
| jimhi wrote:
| Easier, no server access, no time, no knowledge. It also lets
| you mix react versions.
|
| As said below, you can just google people asking how to put a
| cool react component they see online into their GitHub
| page/Wordpress/Shopify
| jdthedisciple wrote:
| Hey good job! Can't identify with the opposition in the comments,
| this looks useful to add a fancy feature to a simple website.
| jimhi wrote:
| Thanks! Let me know if you have any questions or want help
| setting it up for something later.
| endigma wrote:
| make site worse as a service
| eurasiantiger wrote:
| Can you show some page load metrics between a page without any of
| these and the same page with several different widgets packaged
| with this?
|
| Interested in things like kB transferred, first contentful paint,
| time to interactive, etc.
| jimhi wrote:
| Hello, this is a tool that lets you paste some quick react
| components into any static website. So a Github page, Shopify,
| Wordpress, etc.
|
| Sometimes I google a cool React calculator and Webpack is
| confusing and ReactDom throws errors so I built this. I just
| wanted it on my page fast. It works with the most popular 1000
| react libraries or so but you can request others -
| https://smarketman.com/approved/packages/
|
| Since the most common use for this is visual and marketing
| related components, I put in a simple IF/ELSE structure for when
| to show components. You can see more at the homepage:
| https://smarketman.com/.
|
| You can do some complex things by combining them. Like having a
| popup to ask for someone's email when they scroll down a page.
| A/B Testing some titles. Or say showing a coupon code the last
| hour of every weekend.
| Shindi wrote:
| Hey, this is super cool thanks for making. A whole lot of rsync
| - dropbox comments here. I want to be able to give product
| managers a way to change the look and copy of components using
| retool. That way they can skip engineering intervention and
| changes things themselves. Going to try to see if this helps.
| jimhi wrote:
| That's actually the main use case of this service. Feel free
| to email me and I can help set it up.
| devsatish wrote:
| I do see the value in this. Especially for folks trying to add
| some cool react widgets without doing the full dev - specially
| for some old code-base. Respect!
| yawnxyz wrote:
| this is pretty neat! Does this mean you can inject random React
| components into something like a Wordpress site?
| jimhi wrote:
| Yeah, it transpiles it too so you can have conflicting react
| libraries working together
| andix wrote:
| Yes, but you don't need this tool for doing that.
| jimhi wrote:
| Unfortunately using most common react components will fail if
| you try to just use ReactDOM
| andix wrote:
| You can just build your react components into a bundle and
| reference that. Just like this tool is doing behind the
| scenes. That's how most people use React.
| jimhi wrote:
| For Sure. This is for people who don't have the server
| access, knowledge, or patience.
| yawnxyz wrote:
| Yeah this is a really handy shortcut to doing all that!
|
| I work with collaborators hosting their sites on old
| legacy pages (in Academia, hosted on university systems);
| this could make it easy for me to configure components
| for them to drop in for various needs.
| bdorn wrote:
| I'm sorry, but what problem does this solve? Seems like this
| makes the developer experience worse in every way.
| kclay wrote:
| Funny enough I ran into this exact use case recently. We have a
| marketing site for a client done with webflow..But we needed to
| add a third party widget that only had an react library. So I
| ended up creating a CRA project so that I could include the
| bundled file and render the component as needed using the same
| setup (it was a modal + some purchase logic). Added some bare
| js hooks to trigger some of the logic via a button press.
| Worked well actually
| bdorn wrote:
| That works, I was more responding to using this random site
| instead of just CRA locally. Just seems odd.
| jimhi wrote:
| You can see many examples if you google - "How do I put react
| into my " Github page/Shopify/Wordpress etc.
|
| Many developers inherit or prefer a plain page and just want to
| use a cool open source react component real quick like adding a
| slick calculator to their existing webpage.
| bdorn wrote:
| I'm not following - even manually inserting script tags to
| mount the component is better than relying on another site
| like this to bundle it.
| jimhi wrote:
| As said below, most common react libraries will fail if you
| try to just use ReactDOM. Mounting has many issues if you
| try it for more than the basic hello world.
|
| Not to mention you can use multiple different versions of
| react with this.
|
| Just as an example, I was trying to add this simple
| PinField to my wordpress page and it will break if you try
| to mount: https://www.npmjs.com/package/react-pin-field
| sibit wrote:
| > most common react libraries will fail if you try to
| just use ReactDOM
|
| I'd think that would be a pretty big sign that React
| might not be the right tool for the job. I'm all for
| building custom hammers but sometimes it might just be
| better to just grab a screwdriver.
| jimhi wrote:
| Also, you can just download the bundle if you want to
| stop using the site to host it. Personally I make enough
| edits I like to keep it up.
| sibit wrote:
| My comment wasn't a critique on your product. I can
| totally see how this could be handy and I'll keep it
| bookmarked. I was mostly critiquing that web devs
| nowadays always seem to try and reach out for some React
| package whenever they hit any sort of problem. I can see
| that the React packages are mandatory, any plans to
| support other frameworks?
| jimhi wrote:
| Vue would be pretty easy. From personal experience it's
| mostly react that's has all these open source things
| someone might want. Was there one you were thinking of?
___________________________________________________________________
(page generated 2022-09-27 23:02 UTC)