Comments (12)
Hi, @martpie
I think you can try to add your components with classNames by special props. But don't forget to forward the props object from the handler to your component.
So example below:
class CustomScrollbars extends Component {
render() {
return (
<Scrollbars
renderTrackHorizontal={props => <div {...props} className="track-horizontal"/>}
renderTrackVertical={props => <div {...props} className="track-vertical"/>}
renderThumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}
renderThumbVertical={props => <div {...props} className="thumb-vertical"/>}
renderView={props => <div {...props} className="view"/>}>
{this.props.children}
</Scrollbars>
);
}
}
from rc-scrollbars.
Actually, I wonder if it should not forward everything ({...rest}
?) from <Scrollbars>
, attaching an onScroll
on <Scrollbar>
does not work either
from rc-scrollbars.
@Tomassito actually yes, I think I used a @ts-ignore
here and it's still working. (It was valid in react-custom-scrollbars
at least)
edit: yes I can confirm: TS does not accept it, but it works (for the outer wrapper)
from rc-scrollbars.
I think there is an issue here:
rc-scrollbars/src/Scrollbars/index.tsx
Line 692 in 19fe0fa
shouldn't it forwards props
's className
as well?
from rc-scrollbars.
@martpie do you want to apply the className to the Container (outer) or View (inner) element?
Because in the initial question you mention outer and now you refer to the inner...
from rc-scrollbars.
I think there is an issue here:
rc-scrollbars/src/Scrollbars/index.tsx
Line 692 in 19fe0fa
shouldn't it forwards
props
'sclassName
as well?
That's right. I will check how props passing from renderView. ClassNames should be merged I think
from rc-scrollbars.
Maybe I should provide more context 😄
So here's my component:
import React, { useCallback } from 'react';
import Scrollbars from 'react-custom-scrollbars';
import styles from './CustomScrollbar.module.css';
interface Props {
className: string;
onScroll: React.UIEventHandler<any>;
}
const CustomScrollbar: React.FC<Props> = (props) => {
const getRenderView = useCallback((props: any) => {
console.log(props);
return <div {...props} className={styles.renderView} />;
}, []);
const getTrackVertical = useCallback((props: any) => {
return <div {...props} className={styles.verticalTrack} />;
}, []);
const getThumbVertical = useCallback((props: any) => {
return <div {...props} className={styles.verticalThumb} />;
}, []);
return (
<Scrollbars
className={props.className}
onScroll={props.onScroll}
renderView={getRenderView}
renderTrackVertical={getTrackVertical}
renderThumbVertical={getThumbVertical}
autoHide
autoHideTimeout={1000}
>
{props.children}
</Scrollbars>
);
};
export default CustomScrollbar;
Nothing to fancy there, this was using react-custom-scrollbars
. This is what the DOM looks like:
tracks-list-body__xxx
is my component props.className
.
Now after switcing to rc_scrollbars
, the DOM looks like the following:
So indeed, the outer wrapper looks good, and the inner seems to not accept className
.
Thank you for taking the time for looking into it, I really appreciate 🙌
from rc-scrollbars.
Actually, I wonder if it should not forward everything (
{...rest}
?) from<Scrollbars>
, attaching anonScroll
on<Scrollbar>
does not work either
ScrollBars has its own list of props. It is using right from component and you can check that.
Events tracking by native API (addEventListener and removeEvent...) and onScroll prop calling there.
Custom view and tracks are only about style.
from rc-scrollbars.
@martpie alright!
Thank you for your example. 👍
I can fix that today.
from rc-scrollbars.
@martpie Thanks for the example (they always work best :) ) .
Speaking of className - do you not get a TS error when you provide this prop to the Scrollbars component??
from rc-scrollbars.
@martpie
I deployed v1.0.3 with deleted className prop.
from rc-scrollbars.
I can confirm it works fine, thanks! 🙌
from rc-scrollbars.
Related Issues (20)
- When zooming out, the default scroolbar is shown HOT 5
- [v1.1.0]: React does not recognize the `disableDefaultStyles` prop on a DOM element HOT 3
- State of former PR's
- RTL HOT 3
- V[1.1.1] window is not defined - NextJs HOT 3
- Adding an id to the containing div HOT 14
- Scrollbars not visible when disabling native ones HOT 9
- Auto hide with hover mode HOT 17
- Render content from the bottom HOT 2
- Add custom event handlers for components?
- Example with horizontal scrolling table (if possible)
- RC Scrollbars hidding Chraka's Popover
- Unable to wheel on scrollbars
- Possible to style actual scrollbar mover? HOT 1
- Unable show Scrollbar On Google Chrome(and Safari) which does not display scroll bars by default HOT 1
- How to disable horizontal scroll HOT 4
- ESM support
- Scrollbars not appearing/disappearing when internal elements height changes HOT 2
- Trying to figure out the types for the style object in 'renderThumbVertical' HOT 1
- When zooming out, the default scroolbar is shown in FF
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rc-scrollbars.