Need A Clear, Simple, React Example

[slimandslam]

When I wrap content that always scrolls in my React app, nothing changes. I get the same scroll bars as always.
I followed all installation instructions. Is this all I need to do in order to have the overlay scrollbars? Just wrap
the content in the component?

import { OverlayScrollbarsComponent } from "overlayscrollbars-react";

<OverlayScrollbarsComponent defer>
  example content
</OverlayScrollbarsComponent>

[KingSora]

Good day @slimandslam :)

I guess you forgot to import the styles like described in the overlayscrollbars-react README

[slimandslam]

I wish it was that simple. I'm using WebKit directly, and not any standard web browser such as Safari, Firefox, or Chrome. In my case, it may be that I do not have full control of the browser appearance. I will do some more testing.

[slimandslam]

@KingSora
Why doesn't this work? There are no errors in the web console, but the scrollbars do not
change in any way.

import ReactDOM from "react-dom/client";
import App from "./App";
import 'overlayscrollbars/overlayscrollbars.css';
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <OverlayScrollbarsComponent defer>
      <App />
    </OverlayScrollbarsComponent>
  </React.StrictMode>,
);

[slimandslam]

And, here's the clear, simple, example that I created based on a response you made deep in your issues section. This should be on your React page with any necessary caveats.

In your Main.jsx, index.js or whatever file is your entrypoint:

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import { OverlayScrollbars } from "overlayscrollbars";
import 'overlayscrollbars/overlayscrollbars.css';

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
const osInstance = OverlayScrollbars(document.body, { scrollbars: { autoHide: "scroll" } });

root.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
);

[slimandslam]

Also, thank you SO MUCH for this excellent piece of work. :-)

[KingSora]

I'm glad its working now for you! :)

[Luis-Ramirez21x]

Awesome job providing a clear-cut example @slimandslam.

[Luis-Ramirez21x]

And of course big props to @KingSora for the awesome library. Our company will love it.