Fork me on GitHub
#fulcro
<
2023-02-02
>
Nikolas Pafitis00:02:07

Hello fellas, how do I get the react component alternative of dom elements for example (from Mantine's documentation):

function Demo() {
  return <NavLink component="a" href="/home" target="_blank" />;
}
how would I pass the a element to my comp/react-factory wrapper of the NavLink component?

Jakub Holý (HolyJak)10:02:54

(ui-nav-link {:component "a" :href...}) of it's just a string

tony.kay23:02:02

I’m not sure I understand the question, and perhaps Jakub did and is right. The dom/a in Fulcro is both a macro and a function, so you can always pass it by value. You can also use a string and then use that string (“a”) as the tag in c.f.f.dom/crete-element

tony.kay23:02:24

You can also pass an element (reified) from react (e.g. (dom/a {:href "foo"}) returns an element value that can be used elsewhere). i.e.

(let [ele (dom/a ...)]
  a)
is legal

Nikolas Pafitis00:02:26

Also what ui libraries have you found easy to work with from within fulcro other than semantic/fomantic

tony.kay23:02:40

Any react component/library that honors the “controlled component” idea is best. Anything works ok once you understand how to put a factory on it, but since Fulcro encourages you to control state, controlled components are best. That said, input-like things may need a patch (see StringBufferedInput in c.f.f.dom.inputs)

tony.kay23:02:34

Usually the hardest part is js ecosystem variances…i.e. how do you actually require the darn thing, and how do you deal with things like “embedded css” that webpack is supposed to handle. Those are not Fulcro issues.

Tommy19:02:16

thank you, I was trying to solve this exact problem earlier when porting the fulcro template to pathom3

Jakub Holý (HolyJak)19:02:13

Thanks that's good to hear :)