search

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.9k stars 309 forks source link

[Website] Add JSX code snippets in component examples #398

Closed A1X5H04 closed 4 months ago

A1X5H04 commented 5 months ago

Summary

Add JSX code snippets along with HTML

Detailed Description

Many of the users uses react for building website, copying the html requires us to again convert it to jsx by changing class to classname (mostly the class attribute) and other HTML attributes as well, almost all of the HTML attributes are need to be camel cased to use in JSX, see here. To ease up the work, I would request to add a tab for jsx code as well along with the html code this way, we can directly copy jsx from the examples and wouldn't need to rename all the class and other attributes every time we copy and paste a component, I am looking forward to this and thank you for this wonderful library ❤️

Use Cases

In the example components tab like daisyUI or other tailwind component library as well

jahaganiev commented 4 months ago

Hey @A1X5H04 - you might consider using code editor extensions to meet similar preferences. For example, this extension appears to address this case:

https://marketplace.visualstudio.com/items?itemName=dylangarcia.class-to-classname

Anyway, we might consider in future.

Hope that helps!

itxtoledo commented 4 months ago

Is there any way to copy the codes without the HTML comments? The library says it supports react, but to support it I need to manually delete the comments and convert the class names

jahaganiev commented 3 months ago

Is there any way to copy the codes without the HTML comments? The library says it supports react, but to support it I need to manually delete the comments and convert the class names

Please note, Preline is compatible with React including any other frameworks where Tailwind CSS can be run but Preline UI is not React based component library.