Show HN: Paste React components into any website | Hacker News Reader

Show HN: Paste React components into any website

smarketman.com

71 pointsjimhi40 comments

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.

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.

That’s actually the main use case of this service. Feel free to email me and I can help set it up.

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?

It's webpack as a service! I would have never guessed that there was a need for this, but maybe there is.

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.

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!

It would also be possible to embed components written by others without managing a build toolchain.

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?

The use case is copy and pasting code, not learning how to write the code.

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

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.

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?

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

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.

Converting all jsx/javascript from one framework to another would be extremely hard. It's easier to start with something more basic like a mustache/handlebars template - and then add framework specific functionality on top of that. That's what I'm planning for my Chrome extension SnipCSS. (https://chrome.google.com/webstore/detail/snipcss/hbdnoadcma...)

After creating a snippet from someone else's website with the extension, you can get a mustache template by going to templates tab in extension options. React/Vue is coming really soon - next week I should have an update with the feature.

I'm sorry, but what problem does this solve? Seems like this makes the developer experience worse in every way.

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.

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.

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

> 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.

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.

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?

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?

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

That works, I was more responding to using this random site instead of just CRA locally. Just seems odd.

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!

this is pretty neat! Does this mean you can inject random React components into something like a Wordpress site?

Yes, but you don’t need this tool for doing that.

Unfortunately using most common react components will fail if you try to just use ReactDOM

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.

For Sure. This is for people who don't have the server access, knowledge, or patience.

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.

Yeah, it transpiles it too so you can have conflicting react libraries working together

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.

I am confused. It says I can paste React components into any website, but what do I do with the generated script tags? how can do I paste this into github.com or news.ycombinator.com?

If this is a way to just generate a build for me to paste into my own website, then the messaging needs to be adjusted. However, I do like how simple it is to just get a quick React build together without having to deal with the tooling.

It outputs JavaScript so you can only put it in places that interpret the JavaScript like GitHub pages or your own site.

GitHub comments for instance or hackernews comments won’t work.

Hey good job! Can't identify with the opposition in the comments, this looks useful to add a fancy feature to a simple website.

Thanks! Let me know if you have any questions or want help setting it up for something later.

make site worse as a service

Reply on news.ycombinator.com