Closed GetBitOutdoors closed 2 years ago
Use a hiccup implementation that understands components. Reagent and lambdaisland.hiccup are two that I know of. (we should really document this in the README)
I should also add that if you can always just call the component as a function, this will work in any hiccup implementation. Using the square brackets makes a difference in a react/reagent context, but on the backend it's just sugar.
Thanks! I didn't know that about using it as a function.
I started using lambdaisland.hiccup, which I also did not know about, for compatability with Ornament, but also to explore added features like fragments. In a previous project I had switched to Rum just to get style-maps. So it's nice to have have this option.
Trying to follow the first example:
(o/defstyled freebies-link :a {:font-size "1rem" :color "#cff9cf" :text-decoration "underline"})
How do I invoke styled component to render html?
(hiccup.core/html [freebies-link {:href "/xx"} "Freebies"])
Returns error:If I use a keyword as the component name, like regular hiccup html, I don't get the component data:
(hiccup.core/html [:freebies-link {:href "/xx"} "Freebies"]) => "<freebies-link href=\"/xx\">Freebies</freebies-link>"
I would like the option to define and use simple hiccup components, with style rules (declared with style tokens) rendered inline (to start , then later/maybe expand code to use more complex styling, rendering css rules separately). Is this possible?
It seems like I could approximate this by taking the
tag
andrules
functions, and re-assembling the html tag as a function, instead of hiccup vector syntax. But that sounds like I am missing something?Thanks