Fork me on GitHub

New video in the basics series. The tour one was out of date, so I deleted it and renumbered. The new video was added at the end: It covers UI routing. Some of that material was covered in the Union Query video (briefly at the end), but this new video goes into quite a bit of detail on what your options are, shows you the path of development that led to defrouter, and goes through details of joining defrouter together with HTML5 history events, URL matching (with bidi), and even a demonstration of how to deal with routes that need to load their content.


The companion files are also up on github. See the video description for the link.


I’m looking into using react-transition-group with fulcro’s UI routers and it seems promising. The problem is that the routes lose the fulcro dynamic bindings because react-transition-group’s API takes in a function child. This is a known issue with, and some have solved it by rebinding within the function child. [1] I’m almost certain that the fix for fulcro is similar. I was just wondering if some additional thought has been put into this, and if a better way exists or is planned for the future. [1]


@levitanong Any fix for Om Next that works at the UI layer should work with Fulcro.


@tony.kay thanks for the clarification. On the topic of the library design, yeah it makes me uneasy too. I mean, if one must use a function, then why not pass it as a parameter/attribute? It seems to have a strong foothold in the react community though.


strangely, though, there are examples of using it without a function in the facebook docs:


that should “just work” with Fulcro


yeah, that example is specifically for the CSSTransition.


I should play with it and make a video 🙂


It’s something people commonly want


that would be useful to a lot of people!


an example in the book might be more accessible though


such that it is not constrained by time


True…that takes me a lot longer to make 😉


I had used CSSTransitionGroup with Fulcro at dave conservatoire


ah, so examples exist?


I was trying to find the code, but I'm not using it anymore, have to hunt on history


why did you stop using it?


just didn't needed, I was using for animating the progress bar, but later switched to NProgress


does CSSTransition require an example? It seems like a fairly simple API. It’s the outlandish ones like for Transition and ReactMotion that violate the geneva convention


it's simple, I just did a wrapper, the hardest part IMO was just changing the React to use the version with the extensions


So @levitanong I’m confused. You asked about react-transition-group, then said that was easy, then said ReactMotion is really what you want…what is it, exactly, that is your problem?


Are you basically asking how you can use functions as a child?


You can access the raw children prop with (.. component -props -children) if you need to implement something that way. Passing a function into children should work identically…it’s a standard react component. If it doesn’t then I’d consider it a bug. NOTE: the prim/children function always ensures that children is a sequence. Therefore if you pass a function to a Fulcro component and expect a function, you can either access the raw props, or (first (children this))


OH…sorry, I didn’t look at your code link.


Your problem is that the factories lose the binding as children


I can add something like that to Fulcro. I forgot about the bindings…you will need those


and it should also be in the book


@levitanong I pushed 2.1.5-SNAPSHOT with prim/with-parent-context


it should let you do the function as a child pattern