Getting rid of ugly scrollbars using Overlayscrollbars

Sebastian Kurpiel — Fri, 21 Feb 2020 22:54:37 +0000

At Draftbit we were running into an issue where when a user plugged in a mouse into their machine, any scrollable content would render with the default styled macOS scrollbars.

As you can tell, that's not the prettiest look and the scrollbars take up a bit of space in their div. The situation on windows machines wasn't any better as scrollbars are always rendered no matter what.

The quick and easy solution is to use css,


 css
.scrollBar { //Needed for Mozilla when applying overflow:scroll or auto
  scrollbar-width: none;
}
::-webkit-scrollbar { //Needed for Chrome and Safari
  width: 0px;
}

::-webkit-scrollbar-track-piece {
  background-color: transparent;
  -webkit-border-radius: 6px;
}

This will remove the scrollbars and still allow for scrolling, however it removes the indicator showing the user how far they have scrolled. This causes issues with accessibility and isn't the route we wanted to go.

After discussing possibilities including scroll hijacking we settled on using OverlayScrollbars, a library which hides native scrollbars and replaces them with styleable overlay scrollbars.

To integrate we did the following:

create a wrapper component, ScrollContainer, which uses Overlayscrollbars' OverlayScrollbarsComponent
apply the appropriate styles to the component, for us the os-theme-dark was perfect for the dark theme of our builder.
apply options to achieve the scrollbar behaviour that we needed, for our needs we wanted the scrollbars to hide when the user was not scrolling so we enable autohide
we then searched the entire app to find where we were using overflow:auto or overflow:scroll.
if found we would replace that div with ScrollConatiner and apply the proper tailwind classNames.

And BOOM,like that, Draftbit was free of those ugly scrollbars and in their place were some sleek scrollbars that work and look good. If you enjoy making apps look good and want to enter the no-code space, Draftbit is hiring! Come check out how we're making app-building accessible to everyone!

Example:


 js
import * as React from "react";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";

const ScrollContainer = ({ className, children }) => {
  return (
    <OverlayScrollbarsComponent
      className={"os-theme-dark " + className}
      options={{ scrollbars: { autoHide: "scroll" } }}>
      {children}
    </OverlayScrollbarsComponent>
  );
};

export default ScrollContainer;


 js 
import * as React from "react";
import ScrollContainer from "/ScrollContainer"

const PanelThatNeedsToBeScrollable = () => {
  return (
    <ScrollContainer className="p-4 mt-4">
      <div>
        <span className="tallerThanHeightOfScreen"> I'm so tall that my content needs to scroll!!! </span>
      </div>
    </ScrollContainer>
}

Capturing a click outside a Reason-React Component

Sebastian Kurpiel — Fri, 14 Feb 2020 04:34:42 +0000

I found myself the other day trying to build a dropdown component in Reason that on outside click would close the menu if opened.

The only example I could find of this was in Reason from GlennSL and it was a bit outdated since it was written in 2018, before hooks were fully implemented into reason. The code below is an updated version using hooks, it requires the bs-dependency of bs-webapi so make sure to add that before you use it.

[@genType "OnClickOutside"]
[@react.component]
let make = (~onOutsideClick, ~children) => {
  let outsideContainer = React.useRef(Js.Nullable.null);
  React.useEffect0(() => {
    open Webapi.Dom;
    let onClick = e => {
      let target = MouseEvent.target(e);
      let outsideDiv =
        Belt.Option.getExn(
          Js.Nullable.toOption(React.Ref.current(outsideContainer)),
        );
      let targetElement = EventTarget.unsafeAsElement(target);
      if (!Element.contains(targetElement, outsideDiv)) {
        onOutsideClick();
      };
    };
    Document.addClickEventListener(onClick, document);
    Some(() => Document.removeClickEventListener(onClick, document));
  });
  <div ref={outsideContainer->ReactDOMRe.Ref.domRef}> children </div>;
};

The logic breakdown:

wrap the component in a div with a ref
add an event listener for onClick
in that onClick function check whether the element clicked contains the div with the ref, if it does then the click is inside the div. If not then the click is outside of the div.
If the click is outside of the container then do whatever you need it to(in this case above, close the menu)

In the use case above we wrap our select component in the OnClickOutside and onOutsideClick close the dropdown menu container like so;

  let (visible, setVisibility) = React.useState(() => false);
  <OnClickOutside onOutsideClick={_e => setVisibility(_ => false)}>
      <Select.Button
          toggled=visible onClick={_e => setVisibility(_ => !visible)} /> 
      <Select.List name toggled=visible />
  </OnClickOutside>

If you enjoy writing Reason and would like to write more of it, you're in luck. Draftbit is hiring, we're a no-code tool that let's users build cross-platform apps and we're built mostly in reason! Check us out!

UPDATE:

I was experiencing some state issues with the trigger so I added an extra useEffect to fix this.


[@genType "OverlayTrigger"]
[@react.component]
let make = (~onClick, ~children) => {
  let outsideContainer = React.useRef(Js.Nullable.null);
  open Webapi.Dom;
  let onClickHandler = event => {
    let target = MouseEvent.target(event);
    let outsideDiv =
      Belt.Option.getExn(
        Js.Nullable.toOption(React.Ref.current(outsideContainer)),
      );
    let targetElement = EventTarget.unsafeAsElement(target);
    if (!Element.contains(targetElement, outsideDiv)) {
      onClick();
    };
  };

  React.useEffect2(
    () => {
      Document.addMouseDownEventListener(onClickHandler, document);
      Some(
        () => Document.removeMouseDownEventListener(onClickHandler, document),
      );
    },
    (onClick, React.Ref.current(outsideContainer)),
  );

  <div
    className="cursor-pointer w-full"
    ref={outsideContainer->ReactDOMRe.Ref.domRef}>
    children
  </div>;
};

Forem: Sebastian Kurpiel

Getting rid of ugly scrollbars using Overlayscrollbars

Capturing a click outside a Reason-React Component

UPDATE: