I've been working on a Card UI generator in React and once the user is finished with customising it using the UI I want to be able to convert the card (that's a React Component) and export the HTML and CSS behind it. Is there a way to turn a component into HTML String?
4
-
Copy it from your browser?nanobar– nanobar2018-12-05 12:00:15 +00:00Commented Dec 5, 2018 at 12:00
-
I want the user to hit a button that will take the component they've edited in browser and then get all the HTML & CSS for itMrShedford– MrShedford2018-12-05 12:02:13 +00:00Commented Dec 5, 2018 at 12:02
-
What kind of edit will a user make?kiranvj– kiranvj2018-12-05 12:05:41 +00:00Commented Dec 5, 2018 at 12:05
-
Is it important that it's css? it would be easier to use inline styles then it would be a case of element.outerHTMLnanobar– nanobar2018-12-05 12:13:51 +00:00Commented Dec 5, 2018 at 12:13
Add a comment
|
3 Answers
With the testing tool it is possible to render a component into a string. Maybe that fits your use-case? https://github.com/airbnb/enzyme
Comments
If you're using create-react-app, you can create the production-ready build by using npm run build. That will create the HTML and CSS for you.
If you're looking to render particular components, you might look into server-side rendering.
answered Dec 5, 2018 at 11:58
Saša Tomislav Mataić
1,6361 gold badge11 silver badges11 bronze badges
2 Comments
MrShedford
I might have worded the question wrong, what I meant is that I only want it to export a single component as HTML and CSS so people can copy paste the code into their projects. Think of a CSS button generator but for cards :)
Saša Tomislav Mataić
Ah, I see, well, maybe server-side rendering could help you out. Updated my answer. You could render them on the server, in an iframe, for example, and then grab the source.