This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-02-28
Channels
- # aleph (50)
- # announcements (3)
- # aws (35)
- # beginners (74)
- # boot (25)
- # calva (39)
- # cider (18)
- # clara (2)
- # cljdoc (18)
- # cljs-dev (24)
- # cljsrn (11)
- # clojure (166)
- # clojure-europe (13)
- # clojure-italy (5)
- # clojure-nl (6)
- # clojure-spec (35)
- # clojure-uk (263)
- # clojurescript (22)
- # clojutre (1)
- # code-reviews (34)
- # cursive (58)
- # data-science (2)
- # datascript (4)
- # datomic (4)
- # duct (6)
- # emacs (7)
- # figwheel-main (9)
- # fulcro (2)
- # graphql (3)
- # hoplon (22)
- # hyperfiddle (2)
- # juxt (5)
- # kaocha (6)
- # leiningen (33)
- # luminus (15)
- # off-topic (1)
- # pedestal (5)
- # reagent (18)
- # reitit (12)
- # shadow-cljs (171)
- # vim (5)
https://codesandbox.io/s/4990z60
demo.js
TransitionComponent={this.state.Transition}
which refer to for example
function TransitionRight(props) {
return <Slide {...props} direction="right" />;
}
How to do it in reagent?
[mui/snackbar
{:open true
:Transition-component (r/as-element [(r/adapt-react-class mui-core/Slide)
{:direction "right"}])
:style {:position "static"}
:anchor-origin {:vertical "bottom"
:horizontal "left"}
:key id
;:auto-hide-duration 3000
:on-close (fn [_ reason]
(when (= "timeout" reason)
(re-frame/dispatch [::notifications-events/remove id])))}
content]
throw
Warning: Failed prop type: Invalid prop `TransitionComponent` of type `object` supplied to `Snackbar`, expected a component.
@kwladyka try
:Transition-component (r/reactify-component (fn [props] [:> mui-core/Slide props]))
:Transition-props {... whatever props... }
Here’s an example of similar workaround with Dialog
https://github.com/lipas-liikuntapaikat/lipas/blob/dev/webapp/src/cljs/lipas/ui/components/dialogs.cljs#L20-L31
But it looks like if I want to use function in parameters, then I shoudl use reactify-component
Maybe the easy way to put it is that when the API says a prop should be an element, use as-element
and when the API says a prop should be a component, use reactify-component
.
@kwladyka @valtteri https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md have you seen this as well?