Is possible to use JSS with reagent? I wanna use reagent with http://material-ui.com

I’m not sure if I understand the question what comes to JSS, but many people are using material-ui with Reagent.

There’s some interop juggling involved if you want to use withStyles higher order component which they use in the examples, but it’s doable.

FYI, noobs, the pure reagent version of this JS/mxWeb app https://kennytilton.github.io/whoishiring/ is here: https://github.com/kennytilton/hiringagency

hi, i’m using AWS Amplify with my app, and I need to use a couple of their HOC’s. is there a best/standard way to handle HOC’s ?

@eoliphant they work the same way in reagent--you just need to make sure you’re passing the right kind of data (e.g. js or cljs)

examples here https://cljdoc.xyz/d/reagent/reagent/0.8.1/doc/tutorials/interop-with-react

ah, cool. I hadn’t seen the new docs. thanks!

well those docs have been around for a while in the /doc folder but now i can link to the shiny new cljdoc format 🙂

ah yeah ok, i think i’ve seen some of these before. But had missed the HOC demo stuff

So I may need to use current-component or something

to grab the injected props?

I seriously think HOC’s are like the worst idea ever lol

reagent’s choice to use pass positional parameters as props.children certainly makes it harder to deal with

but basically you’ll want to wrap your reagent stuff in reactify-component then you can just grab the injected props off the props map

We are in the process of creating a react component library for our internal apps and we are also planning to use cljs/reagent for some greenfield projects. Are there any best practices to creating our components such that they can be easily used in reageant? Just wondering if there is resource where I can look up any caveats to be aware of

HOCs (as we happen to be discussing) are a little bit cumbersome, but they work fine.

Otherwise, I can’t think of anything specific that matters. You will have to marshal data, but given the overhead of the DOM, I haven’t noticed that that ever matters.

Yeah I’ve turned this example

class MyApp extends React.Component {
    // ...
    render() {
        return(
            <button onClick={this.props.OAuthSignIn}>
                Sign in with AWS
            </button>
        )
    }
}

export default withOAuth(MyApp);

mp-react (r/reactify-component views/main-panel)
        wrapped-mp (withOAuth mp-react)
        adapted-mp (r/adapt-react-class wrapped-mp)

is that a let block?

yep

will refactor it into a -> macro or something next, but just wanted to break each step out

yea so keep in mind that your views/main-panel has to be written with a signature that is compatible with reactify-component: e.g. it only takes a single argument

(this is the part that is clunky with HOCs)

but yeah, HOC’s are just horrific to me from a design perspective. It’s not a ‘real’ decorator since the injection ‘leaks’ the properties into the wrapped component

gotcha

well

even more fun is the fact that

render functions are a much better design imo

I’m of course, going to need to call OAuthSignIn in a component further down the tree

If I use my external react component library with reagent I should create an externs file for advanced compilation correct?

though having said that, that does allow me to have a cleaner api for everything else

since it needs to be passed explicitly

@dfcarpenter if you are doing a lot of js interop and you’re going to be working on a greenfield project, you should use shadow-cljs and turn on externs inference. maintaining externs files is a nightmare

yeah +1 on that @dfcarpenter

ok thanks. I created a project with re-frame template and ill look into adding shadow-cljs to it

if you’re a javascript guy, do yourself a favor and ditch lein if at all possible. just use normal unix tools if you need a build system (and you might not for a good long while)

shadow makes that easier to do by simplifying everything

there’s a #shadow-cljs channel that is very active

yeah I’m only using lein with my frontend stuff because I use cursive..

you don’t need to do that. you can just run shadow-cljs pom whenever you update your dependencies

i use cursive too and don’t need lein

ok thanks, I was just plugging along using lein.

yea it’s easy to do because you can get started faster