Simplebar: How use in react?

[hosseind2017]

[rbmedia]

any update on this question?

[Grsmto]

The usage of the plugin is described in the usage section of the README there is nothing specific for React.
In some scenarios you may experience issues when using Simplebar with React and I plan to release a React wrapper in the future. But for simple usages it should just work.

[danielcimento]

I'm having trouble with simplebar in React as well.
I can get the css styling to work, but nothing happens on scroll (either click + drag or using the mouse wheel).

I've tried both using npm and <script> tags to load the plugin, but in both cases it only gets as far as the styling.

I'm not sure if there are any other dependencies needed for the plugin, or if anything is conflicting with the JS, but as of right now I can't manage to get any scrolling functionality out of it.

Also, in the readme, I'm assuming

If you are using a module loader you first need to load SimpleBar: import 'SimpleBar'; or import SimpleBar from 'SimpleBar';

should say simplebar instead of SimpleBar. Unless I'm mistaken, as the latter causes importing errors while the former doesn't.

On the same note, though, just using import "simplebar" doesn't seem to be enough to load the package. I have to do something like import "simplebar/dist/simplebar.css"; to get the styling to work at all. I've tried loading the JS the same way, though, and it still doesn't have any scroll functionality.

[danielcimento]

Ah, it looks like my problem was that I was trying to add a scrollbar to tbody elements instead of div elements. I would have thought that both would work, but it seems only the latter works. If that's not just a bug, I would suggest putting that on the README

[Grsmto]

Thanks for the feedback. I'll leave that issue opened as it needs some clarification on React usage anyway. As you pointed out, the usage section of the README is not very clear at all!

About the tbody it's probably due to the default display css property. I'll look into it as well.

[hosseind2017]

@Grsmto @danielcimento thank you friends for help😍❤️...I solved it🙏

[Grsmto]

There is now a SimpleBar-React plugin, take a look there.

[JJAshcraft]

can you provide example usage on a react JSX element?

[Grsmto]

@JJAshcraft sure, I will provide some complete examples soon. In the meanwhile you can take a look there.

Or, for example with the option forceVisible: true:

import SimpleBar from 'simplebar-react';

// import css!
import 'simplebar/dist/simplebar.min.css';

const MyComponent = () => (
  <SimpleBar data-simplebar-force-visible>
    // whatever you want here!
  </SimpleBar>
);

[Grsmto]

You can now find an example using Create React App https://github.com/Grsmto/simplebar/tree/master/examples/react

[JJAshcraft]

thanks for the quick reply! much appreciated.

[santosh898]

How to recalculate in react?

[Grsmto]

@santosh898 you can't right now but it's in progress in #369

Maybe a workaround in the meanwhile could be:

import SimpleBar from "simplebar"

SimpleBar.instances.get(document.querySelector('[data-simplebar]'])).recalculate()

However you most likely shouldn't need to call it manually. Could you tell me in what scenario you're needing to call recalculate?

[Grsmto]

So the new version of simplebar-react is released, please check the documentation, you can now directly pass a ref.

[santosh898]

@santosh898 you can't right now but it's in progress in #369

Maybe a workaround in the meanwhile could be:

import SimpleBar from "simplebar"

SimpleBar.instances.get(document.querySelector('[data-simplebar]'])).recalculate()

However you most likely shouldn't need to call it manually. Could you tell me in what scenario you're needing to call recalculate?

It was another component causing unnecessary scroll, thought it was simplebar, my bad.
The new version is nice.