reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
2021-03-30T13:56:30.063400Z

For this code,

what is :> in (defn root []
  [:> rn/View {:style (:container styles)}

2021-03-30T14:01:34.064100Z

Thanks. Is there a quick way to see the translated output of cljs to some vanilla js like what http://babeljs.io does ?

p-himik 2021-03-30T14:07:15.064300Z

No, because there's no translation step.

p-himik 2021-03-30T14:07:24.064500Z

What exactly are you trying to figure out?

2021-03-30T14:09:53.065100Z

Currently no. The link solves the actual question.

Greg Jeanmart 2021-03-30T14:11:21.066200Z

Hello, I'm trying to use https://github.com/ivmarcos/react-to-pdf but I have to admit I have no clue how to handle this kind of React syntax (function in component) with reagent. Any tips?

const ref = React.createRef();
<div>
    <ReactToPdf targetRef={ref} filename="div-blue.pdf">
        {({toPdf}) => (
            <button onClick={toPdf}>Generate pdf</button>
        )}
    </ReactToPdf>
    <div style={{width: 500, height: 500, background: 'blue'}} ref={ref}/>
</div>

p-himik 2021-03-30T14:13:03.066600Z

The post above yours has the two doc links in its thread. :)

Greg Jeanmart 2021-03-30T14:14:00.066800Z

haaaa thanks. Next time I will scroll up a bit !

p-himik 2021-03-30T14:14:41.067Z

Or better yet, just read the titles and subtitles in the Reagent documentation files. :) 99% of the time the answer is there.

1👍
Ronny Li 2021-03-30T22:20:19.069400Z

Hi everyone, my components are starting to have a lot of control flow code inside. Any suggestions for the best practice to split things up? Example:

(defn my-component [args hidden? collapsed? suppress-error-msg?]
  ...)
Thank you 🙂

p-himik 2021-03-30T22:23:31.069500Z

Check out how re-com is implemented. One note on that though - personally, I would advise against using [& {:keys [...]}] in favor of using [{:keys [...]}].

Ronny Li 2021-03-30T22:25:46.069700Z

Thank you! I'll take a look

lilactown 2021-03-30T22:49:42.069900Z

one thing to consider is breaking up your component into separate components that a consumer can get more control from:

(defn some-component []
  (let [collapsed? (r/atom false)]
    (fn []
      [collapsable {:collapsed? @collapsed}
       [my-component-body ,,,]])))

2➕