rum 2020-05-25 | Slack Archive

I've been trying to figure out how to do this in rum:

class MyComponent extends Component {
  componentDidMount() {
    this.node.scrollIntoView();
  }

  render() {
    return <div ref={node => this.node = node} />
  }
}

Anyone knows?

didibus04:05:24

I just don't understand how I'm supposed to make use of ref

didibus05:05:09

This is the best I got, is that the idiomatic rum way?

(rum/defcs MyComponent <
  {:class-properties {"node" (rum/create-ref)}
   :did-mount
   (fn[state]
     (.scrollIntoView (.-node (:rum/react-component state)))
     state)}
  [state]
  [:div {:ref (.-node (:rum/react-component state))}])

Roman Liutikov07:05:56

(rum/defc MyComponent []
  (let [ref (rum/use-ref nil)]
    (rum/use-effect! #(.scrollIntoView (rum/deref ref))
                     [])
    [:div {:ref ref}]))

Roman Liutikov07:05:24

the above should work with hooks

didibus10:05:58

Hum, I'd need to switch fully to hooks though for that. Is what I did for class based components the best it gets?

Roman Liutikov10:05:09

Not fully, just for that component by using defc

didibus10:05:43

Hum, that's true, I could explore that option, though I think I might be using other mixins. But I guess I can learn hooks and move those to hooks as well

Lyn Headley17:05:41

@didibus Untested

levitanong18:05:20

did-mount would probably need to return rum-state.

(fn [state] 
  (.scrollIntoView (rum/dom-node state))
  state)

didibus19:05:35

dom-node is deprecated though. I was trying to use the suggested replacement. Which based on the react documentation, is what I pasted above, that is to use a ref

2020-05-25

Channels