Closed martpie closed 3 years ago
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>
);
}
}
I think there is an issue here:
shouldn't it forwards props
's className
as well?
Actually, I wonder if it should not forward everything ({...rest}
?) from <Scrollbars>
, attaching an onScroll
on <Scrollbar>
does not work either
@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...
I think there is an issue here:
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
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 🙌
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.
@martpie alright! Thank you for your example. 👍 I can fix that today.
@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??
@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)
@martpie I deployed v1.0.3 with deleted className prop.
I can confirm it works fine, thanks! 🙌
Thank you for taking over the project 👏
I tried to move my project to
rc-scrollbars
, but it seems I cannot setclassName
to<Scrollbars />
, would it be possible to add it?