reagent 2021-03-30 | Slack Archive

For this code,

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

p-himik13:03:45

https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md

p-himik13:03:17

I guess this is a better suited doc: https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md#creating-reagent-components-from-react-components

pinkfrog14:03:34

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

p-himik14:03:15

No, because there's no translation step.

p-himik14:03:24

What exactly are you trying to figure out?

pinkfrog14:03:53

Currently no. The link solves the actual question.

Greg Jeanmart14:03:21

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-himik14:03:03

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

Greg Jeanmart14:03:00

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

p-himik14:03:41

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

👍 3

Ronny Li22:03:19

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-himik22:03:31

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 Li22:03:46

Thank you! I'll take a look

lilactown22:03:42

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 ,,,]])))

➕ 6

2021-03-30

Channels