Skip to content

Commit 032fe5b

Browse files
sakhnyuksakhnyuk
committed
chore: Update Customization page
1 parent ecaff7c commit 032fe5b

File tree

3 files changed

+102
-63
lines changed

3 files changed

+102
-63
lines changed

‎docs/customization.md‎

Lines changed: 98 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,37 @@ order: 3
77

88
The `<Scrollbars>` component consists of the following elements:
99

10-
* `view` The element your content is rendered in
11-
* `trackHorizontal` The horizontal scrollbars track
12-
* `trackVertical` The vertical scrollbars track
13-
* `thumbHorizontal` The horizontal thumb
14-
* `thumbVertical` The vertical thumb
10+
- `root` The root element that covering scrolled view with track and thumb placed
11+
- `view` The element your content is rendered in
12+
- `trackHorizontal` The horizontal scrollbars track
13+
- `trackVertical` The vertical scrollbars track
14+
- `thumbHorizontal` The horizontal thumb
15+
- `thumbVertical` The vertical thumb
1516

16-
Each element can be **rendered individually** with a function that you pass to the component. Say, you want use your own `className` for each element:
17+
![scrollbar-components](/scrollbar-components.png)
18+
19+
## `rc-scrollbars` provide three ways to get your components styled
20+
21+
## Render props
22+
23+
Each element can be **rendered individually** with a function that you pass to the component.
24+
25+
Say, you want use your own `className` for each element:
1726

1827
```typescript jsx
1928
import { Scrollbars } from 'rc-scrollbars';
20-
import './styles.css'
29+
import './styles.css';
2130

2231
class CustomScrollbars extends Component {
2332
render() {
2433
return (
2534
<Scrollbars
26-
renderTrackHorizontal={props => <div {...props} className="track-horizontal"/>}
27-
renderTrackVertical={props => <div {...props} className="track-vertical"/>}
28-
renderThumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}
29-
renderThumbVertical={props => <div {...props} className="thumb-vertical"/>}
30-
renderView={props => <div {...props} className="view"/>}>
35+
renderTrackHorizontal={(props) => <div {...props} className="track-horizontal" />}
36+
renderTrackVertical={(props) => <div {...props} className="track-vertical" />}
37+
renderThumbHorizontal={(props) => <div {...props} className="thumb-horizontal" />}
38+
renderThumbVertical={(props) => <div {...props} className="thumb-vertical" />}
39+
renderView={(props) => <div {...props} className="view" />}
40+
>
3141
{this.props.children}
3242
</Scrollbars>
3343
);
@@ -45,77 +55,106 @@ class App extends Component {
4555
}
4656
```
4757

48-
**Important**: **You will always need to pass through the given props** for the respective element like in the example above: `<div {...props} className="track-horizontal"/>`.
49-
This is because we need to pass some default `styles` down to the element in order to make the component work.
58+
**Important**: **You will always need to pass through the given props** for the respective element like in the example above: `<div {...props} className="track-horizontal"/>`. This is because we need to pass some default `styles` down to the element in order to make the component work.
5059

5160
If you are working with **inline styles**, you could do something like this:
5261

53-
```javascript
62+
```jsx | pure
5463
import { Scrollbars } from 'rc-scrollbars';
5564

65+
const myOwnStyles = { backgroundColor: 'blue' };
66+
5667
class CustomScrollbars extends Component {
5768
render() {
5869
return (
5970
<Scrollbars
60-
renderTrackHorizontal={({ style, ...props }) =>
61-
<div {...props} style={{ ...style, backgroundColor: 'blue' }}/>
62-
}>
71+
renderTrackHorizontal={({ style, ...props }) => (
72+
<div {...props} style={{ ...style, ...myOwnStyles }} />
73+
)}
74+
>
6375
{this.props.children}
6476
</Scrollbars>
6577
);
6678
}
6779
}
6880
```
6981

70-
For convenience, some 'marker' classes are provided for each of the subcomponents:
82+
## Default classNames
7183

72-
`root`: 'rc-scrollbars-container'
73-
`view`: 'rc-scrollbars-view'
74-
`trackVertical`: 'rc-scrollbars-track rc-scrollbars-track-v'
75-
`trackHorizontal`: 'rc-scrollbars-track rc-scrollbars-track-h'
76-
`thumbVertical`: 'rc-scrollbars-thumb rc-scrollbars-thumb-v'
77-
`thumbHorizontal`: 'rc-scrollbars-thumb rc-scrollbars-thumb-h'
78-
79-
There's very little 'beautifying' styles applied by default, however if you'd like to change the `background-color` of the **thumbs** or `border-radius` of the **tracks** you can easily disable their default styling by passing a single prop `disableDefaultStyles`.
84+
For convenience, some 'marker' classes are provided for each of the subcomponents:
85+
86+
`root`: 'rc-scrollbars-container'
87+
`view`: 'rc-scrollbars-view'
88+
`trackVertical`: 'rc-scrollbars-track rc-scrollbars-track-v'
89+
`trackHorizontal`: 'rc-scrollbars-track rc-scrollbars-track-h'
90+
`thumbVertical`: 'rc-scrollbars-thumb rc-scrollbars-thumb-v'
91+
`thumbHorizontal`: 'rc-scrollbars-thumb rc-scrollbars-thumb-h'
92+
93+
There's very little 'beautifying' styles applied by default, however if you'd like to change the `background-color` of the **thumbs** or `border-radius` of the **tracks** you can easily disable their default styling by passing a single prop `disableDefaultStyles`.
94+
95+
## Classes prop
96+
97+
You can pass `classes` prop and set your own className for every provided element
98+
99+
```jsx | pure
100+
import { Scrollbars } from 'rc-scrollbars';
101+
import css from './styles.module.css';
102+
103+
const StyledScrollbars = ({ children }) => {
104+
return (
105+
<Scrollbars
106+
classes={{
107+
root: css.root,
108+
view: css.view,
109+
trackHorizontal: css.trackHorizontal,
110+
thumbHorizontal: css.thumbHorizontal,
111+
trackVertical: css.trackVertical,
112+
thumbVertical: css.thumbVertical,
113+
}}
114+
>
115+
{children}
116+
</Scrollbars>
117+
);
118+
};
119+
```
80120

81-
## Respond to scroll events
121+
# Respond to scroll events
82122

83123
If you want to change the appearance in respond to the scrolling position, you could do that like:
84124

85125
```javascript
86126
import { Scrollbars } from 'rc-scrollbars';
87127
class CustomScrollbars extends Component {
88-
constructor(props, context) {
89-
super(props, context)
90-
this.state = { top: 0 };
91-
this.handleScrollFrame = this.handleScrollFrame.bind(this);
92-
this.renderView = this.renderView.bind(this);
93-
}
94-
95-
handleScrollFrame(values) {
96-
const { top } = values;
97-
this.setState({ top });
98-
}
99-
100-
renderView({ style, ...props }) {
101-
const { top } = this.state;
102-
const color = top * 255;
103-
const customStyle = {
104-
backgroundColor: `rgb(${color}, ${color}, ${color})`
105-
};
106-
return (
107-
<div {...props} style={{ ...style, ...customStyle }}/>
108-
);
109-
}
110-
111-
render() {
112-
return (
113-
<Scrollbars
114-
renderView={this.renderView}
115-
onScrollFrame={this.handleScrollFrame}
116-
{...this.props}/>
117-
);
118-
}
128+
constructor(props, context) {
129+
super(props, context);
130+
this.state = { top: 0 };
131+
this.handleScrollFrame = this.handleScrollFrame.bind(this);
132+
this.renderView = this.renderView.bind(this);
133+
}
134+
135+
handleScrollFrame(values) {
136+
const { top } = values;
137+
this.setState({ top });
138+
}
139+
140+
renderView({ style, ...props }) {
141+
const { top } = this.state;
142+
const color = top * 255;
143+
const customStyle = {
144+
backgroundColor: `rgb(${color}, ${color}, ${color})`,
145+
};
146+
return <div {...props} style={{ ...style, ...customStyle }} />;
147+
}
148+
149+
render() {
150+
return (
151+
<Scrollbars
152+
renderView={this.renderView}
153+
onScrollFrame={this.handleScrollFrame}
154+
{...this.props}
155+
/>
156+
);
157+
}
119158
}
120159
```
121160

‎docs/demo.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,24 +120,24 @@ import { Scrollbars } from 'rc-scrollbars';
120120
import { Lorem } from './components/Lorem';
121121

122122
export default class App extends React.Component {
123-
thumbVertical({style, ...props}: HTMLAttributes<HTMLDivElement>) {
123+
thumbVertical({ style, ...props }: HTMLAttributes<HTMLDivElement>) {
124124
const finalStyle = {
125125
...style,
126126
cursor: 'pointer',
127127
backgroundColor: 'rgba(0,255,0,.6)',
128128
};
129129

130-
return <div style={finalStyle} {...props} />;
130+
return <div style={finalStyle} {...props} />;
131131
}
132132

133-
thumbHorizontal({style, ...props}: HTMLAttributes<HTMLDivElement>) {
133+
thumbHorizontal({ style, ...props }: HTMLAttributes<HTMLDivElement>) {
134134
const finalStyle = {
135135
...style,
136136
cursor: 'pointer',
137137
backgroundColor: 'rgba(255,0,0,.6)',
138138
};
139139

140-
return <div style={finalStyle} {...props} />;
140+
return <div style={finalStyle} {...props} />;
141141
}
142142

143143
render() {

‎public/scrollbar-components.png‎

217 KB
Loading

0 commit comments

Comments
 (0)