How to use findDOMNode?

reasonreact
#1

Hi all

Can someone please show me, how to work with findDOMNode from https://reasonml.github.io/reason-react/docs/en/dom.html?
What am I trying to archive is, I have the following element:

<div class="nav-menu fixed-top"> .

in JQUERY, I would interacting it like:

With JQUERY I would do like:

  function menuscroll() {
        var $navmenu = $('.nav-menu');
        if ($(window).scrollTop() > 50) {
            $navmenu.addClass('is-scrolling');
        } else {
            $navmenu.removeClass("is-scrolling");
        }
    }
    menuscroll();

How to do it with reason react?
Thanks

#2

Hi! Are you using React in your project? If this is just a vanilla JS project with no framework you don’t have to add ReasonReact for findDOMNode, and you can use querySelector.

In that case your code could look like:

/**
  * The module Jquery has external bindings to the DOM and JQuery.
  * See https://bucklescript.github.io/ for more info on externals.
  */
module Jquery = {
  type element;
  type domNode;
  [@bs.val] external window : domNode = "";
  [@bs.val] external select : string => element = "$";
  [@bs.val] external wrapDOMNode : domNode => element = "$";

  [@bs.send] external addClass : (element, string) => unit = "";
  [@bs.send] external removeClass: (element, string) => unit = "";
  [@bs.send] external scrollTop: (element, unit) => int = "";
};

let menuscroll = () => {
  let navmenu = Jquery.select(".nav-menu");
  let window = Jquery.wrapDOMNode(Jquery.window);

  if (Jquery.scrollTop(window, ()) > 50) {
    Jquery.addClass(navmenu, "is-scrolling");
  } else {
    Jquery.removeClass(navmenu, "is-scrolling");
  }
};

You can see the compiled result at https://reasonml.github.io/try?rrjsx=true&reason=PQKhCgAJJSBUAWBTSBbA9gEwK4BsUBSAjtkgE4CekCAhgM6RIAeALuQHY26QBGAlu0wCA5gxbpILZJAAiAeQCykGoMgEAiqUoA6KDEgBlJCgQsWABzoAuYMB7YAxgGt8dB2T7mW24XynYebT50YEgAM3QyNEiUAQjIdHZGVg4uOl1oEGBwDBx8NRJyKgBeSABvPRYKcxQkfFQkdhYAbkrqlEx0VAA5LCRW6ABtAAEedIA3LgBdZLYyTm4AdwFOxcgrSE6evshSgCI9gcgRse1J3BnmOYXIOjqkBxZ125YPdmFdgD5Gesan-YAJIc9CcJtNZqklmQaOZ5ApepgUBstgiUMVvvcGk1dpA9kDWiDRuk7oJLil5lxlJhMABhXD0BgbAAUmL+ABoXm9hABKL6QbDsPw4g5HUHaEmYMnXSlkJAYcZIOkM5mspocuivES89H8wX-XHAoZE8WNSUQincNxkdC4XBwdDmFW-NW6vza74CfUi8AAXwJ+CeWOwVpt3FKTPd5T0AcgnHGQZxxC0FBN+EeTL22jjAFog3tuUcY8tBOg1qUk0VtItobDFKimRWdMXVgXwHo+GFIA3CjoQ7b7eYmc3SxyI7zvgBWAAMvIq0GgjZTNGpSrodCZcaDHL2fDo2b7uBE+aOPp+dyj84Kye0svlivpa43NHjjWw293+-coaPregPt9zRAA