Skip to content

Commit b3ef55a

Browse files
sakhnyuksakhnyuk
authored
Merge pull request #11 from Tomassito/support_className_on_root_component
support className on root component; - default classNames - classes prop - disableDefaultStyles prop - update docs
2 parents 35f9ccb + a9c5d6f commit b3ef55a

File tree

19 files changed

+2485
-3568
lines changed

19 files changed

+2485
-3568
lines changed

‎.prettierrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@
55
"semi": true,
66
"printWidth": 100,
77
"trailingComma": "all",
8-
"proseWrap": "never"
8+
"proseWrap": "never",
9+
"endOfLine": "auto"
910
}

‎.umirc.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { defineConfig } from 'dumi';
22

33
export default defineConfig({
44
title: 'rc-scrollbar',
5-
mode: 'docs',
5+
mode: 'doc',
66
logo: '/logo.svg',
77
favicon: '/favicon.ico',
88
exportStatic: {},

‎docs/API.md‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,15 @@ order: 4
99
| Property | Description | Type | Default |
1010
| --- | --- | --- | --- |
1111
| autoHeight | Enable auto-height mode. When `true` container grows with content | `boolean` | `false` |
12-
| autoHeightMax | Set a minimum height for auto-height mode. Ignoring if **autoHeight** is `false` | `Number` | 0 |
13-
| autoHeightMin | Set a maximum height for auto-height mode. Ignoring if **autoHeight** is `false`| `Number` | 200 |
12+
| autoHeightMax | Set a minimum height for auto-height mode. Ignoring if **autoHeight** is `false` | `number` | 0 |
13+
| autoHeightMin | Set a maximum height for auto-height mode. Ignoring if **autoHeight** is `false`| `number` | 200 |
1414
| autoHide | Enable auto-hide mode. When `true` tracks will hide automatically and are only visible while scrolling. | `boolean` | `false` |
15-
| autoHideDuration | Duration for hide animation in ms. | `Number` | 200 |
16-
| autoHideTimeout | Hide delay in ms. | `Number` | 1000 |
17-
| hideTracksWhenNotNeeded | Hide tracks (`visibility: hidden`) when content does not overflow container. | `Boolean` | `false` |
15+
| autoHideDuration | Duration for hide animation in ms. | `number` | 200 |
16+
| autoHideTimeout | Hide delay in ms. | `number` | 1000 |
17+
| classes | extra custom className/s to any of the subcomponents | <code>Partial<Record<'root' &#124; 'view' &#124; 'trackVertical' &#124; 'trackHorizontal' &#124; 'thumbVertical' &#124; 'thumbHorizontal', string></code> | `{}`
18+
| className | className for the root component | `string` | `undefined`
19+
| disableDefaultStyles | removes basic styling to ease visual customization | `boolean` | `false`
20+
| hideTracksWhenNotNeeded | Hide tracks (`visibility: hidden`) when content does not overflow container. | `boolean` | `false` |
1821
| onScroll | Event handler | `(e: React.UIEvent<HTMLElement>) => void` | `undefined` |
1922
| onScrollFrame | Runs inside the animation frame. Type of `ScrollValues` you can check below | `(values: ScrollValues) => void` | `undefined` |
2023
| onScrollStart | Called when scrolling starts | `() => void` | `undefined` |
@@ -25,10 +28,9 @@ order: 4
2528
| renderTrackHorizontal | Horizontal track element | `(props: HTMLAttributes<HTMLDivElement>) => JSX.Element` | `undefined` |
2629
| renderTrackVertical | Vertical track element | `(props: HTMLAttributes<HTMLDivElement>) => JSX.Element` | `undefined` |
2730
| renderView | The element your content will be rendered in | `(props: HTMLAttributes<HTMLDivElement>) => JSX.Element` | `undefined` |
28-
| thumbMinSize | The element your content will be rendered in | `Number` | 30 |
29-
| thumbSize | The element your content will be rendered in | `Number or undefined` | `undefined` |
30-
| universal | Enable universal rendering (SSR). [Learn how to use universal rendering](/usage#universal-rendering) | `Boolean` | `false` |
31-
31+
| thumbMinSize | The element your content will be rendered in | `number` | 30 |
32+
| thumbSize | The element your content will be rendered in | `number or undefined` | `undefined` |
33+
| universal | Enable universal rendering (SSR). [Learn how to use universal rendering](/usage#universal-rendering) | `boolean` | `false` |
3234

3335
### ScrollValues
3436
```typescript

‎docs/README.md‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ React scrollbars component.
99

1010
`rc-scrollbars` is rejuvenated project of <a href="https://github.com/malte-wessel/react-custom-scrollbars" target="_blank">react-custom-scrollbars</a>
1111

12-
[![npm](https://img.shields.io/badge/npm-rc--scrollbars-brightgreen.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)
13-
[![npm version](https://img.shields.io/npm/v/rc-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)
12+
[![npm](https://img.shields.io/badge/npm-rc--scrollbars-brightgreen.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)
13+
[![npm version](https://img.shields.io/npm/v/rc-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)
1414
[![npm downloads](https://img.shields.io/npm/dm/rc-scrollbars.svg?style=flat-square)](https://www.npmjs.com/package/rc-scrollbars)
1515

1616
* frictionless native browser scrolling
@@ -25,6 +25,22 @@ React scrollbars component.
2525

2626
#### **[Demos](/demo) · [API](/api) · [GitHub](https://github.com/sakhnyuk/rc-scrollbars)**
2727

28+
```jsx
29+
/**
30+
* title: Basic DEMO of scrollbar
31+
* hideActions: ['CSB', 'EXTERNAL']
32+
*/
33+
import React from 'react';
34+
import { Scrollbars } from 'rc-scrollbars';
35+
import { Lorem } from './components/Lorem';
36+
37+
export default () => (
38+
<Scrollbars style={{ maxWidth: 600, height: 300 }}>
39+
<Lorem />
40+
</Scrollbars>
41+
);
42+
```
43+
2844
## Installation
2945
```bash
3046
npm install rc-scrollbars --save

‎docs/components/ColoredScrollbars.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { Component, HTMLAttributes } from 'react';
2-
import { Scrollbars } from 'rc-scrollbars';
3-
import { ScrollValues } from 'lib/Scrollbars/types';
1+
import React, { Component, HTMLAttributes } from 'react';
2+
import { Scrollbars, ScrollValues } from 'rc-scrollbars';
43

54
type State = {
65
top: number;

‎docs/customization.md‎

Lines changed: 100 additions & 50 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,66 +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-
## Respond to scroll events
82+
## Default classNames
83+
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+
```
120+
121+
# Respond to scroll events
71122

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

74125
```javascript
75126
import { Scrollbars } from 'rc-scrollbars';
76127
class CustomScrollbars extends Component {
77-
constructor(props, context) {
78-
super(props, context)
79-
this.state = { top: 0 };
80-
this.handleScrollFrame = this.handleScrollFrame.bind(this);
81-
this.renderView = this.renderView.bind(this);
82-
}
83-
84-
handleScrollFrame(values) {
85-
const { top } = values;
86-
this.setState({ top });
87-
}
88-
89-
renderView({ style, ...props }) {
90-
const { top } = this.state;
91-
const color = top * 255;
92-
const customStyle = {
93-
backgroundColor: `rgb(${color}, ${color}, ${color})`
94-
};
95-
return (
96-
<div {...props} style={{ ...style, ...customStyle }}/>
97-
);
98-
}
99-
100-
render() {
101-
return (
102-
<Scrollbars
103-
renderView={this.renderView}
104-
onScrollFrame={this.handleScrollFrame}
105-
{...this.props}/>
106-
);
107-
}
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+
}
108158
}
109159
```
110160

‎docs/demo.md‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ order: 5
1111
/**
1212
* title: Default vertical content
1313
* desc: Default usage of rc-scrollbars with vertical scroll
14+
* hideActions: ['CSB']
1415
*/
1516
import React from 'react';
1617
import { Scrollbars } from 'rc-scrollbars';
@@ -27,6 +28,7 @@ export default () => (
2728
/**
2829
* title: Default hozintal content
2930
* desc: Default usage of rc-scrollbars with horizontal and vertical scroll
31+
* hideActions: ['CSB']
3032
*/
3133
import React from 'react';
3234
import { Scrollbars } from 'rc-scrollbars';
@@ -44,6 +46,9 @@ export default () => (
4446
## Auto-hide
4547

4648
```jsx
49+
/**
50+
* hideActions: ['CSB']
51+
*/
4752
import React from 'react';
4853
import { Scrollbars } from 'rc-scrollbars';
4954
import { Lorem } from './components/Lorem';
@@ -67,6 +72,7 @@ export default class App extends React.Component {
6772
/**
6873
* title: Colored Scrollbar
6974
* desc: Example type customization of scrollbar and view
75+
* hideActions: ['CSB']
7076
*/
7177
import React from 'react';
7278
import ColoredScrollbars from './components/ColoredScrollbars';
@@ -84,6 +90,7 @@ export default () => (
8490
```jsx
8591
/**
8692
* title: Shadow view
93+
* hideActions: ['CSB']
8794
*/
8895
import React from 'react';
8996
import { Scrollbars } from 'rc-scrollbars';
@@ -106,30 +113,31 @@ export default class App extends React.Component {
106113
```tsx
107114
/**
108115
* title: Styled scrollbar
116+
* hideActions: ['CSB']
109117
*/
110118
import React from 'react';
111119
import { Scrollbars } from 'rc-scrollbars';
112120
import { Lorem } from './components/Lorem';
113121

114122
export default class App extends React.Component {
115-
thumbVertical({style, ...props}: HTMLAttributes<HTMLDivElement>) {
123+
thumbVertical({ style, ...props }: HTMLAttributes<HTMLDivElement>) {
116124
const finalStyle = {
117125
...style,
118126
cursor: 'pointer',
119127
backgroundColor: 'rgba(0,255,0,.6)',
120128
};
121129

122-
return <div style={finalStyle} {...props} />;
130+
return <div style={finalStyle} {...props} />;
123131
}
124132

125-
thumbHorizontal({style, ...props}: HTMLAttributes<HTMLDivElement>) {
133+
thumbHorizontal({ style, ...props }: HTMLAttributes<HTMLDivElement>) {
126134
const finalStyle = {
127135
...style,
128136
cursor: 'pointer',
129137
backgroundColor: 'rgba(255,0,0,.6)',
130138
};
131139

132-
return <div style={finalStyle} {...props} />;
140+
return <div style={finalStyle} {...props} />;
133141
}
134142

135143
render() {
@@ -153,6 +161,7 @@ export default class App extends React.Component {
153161
```jsx
154162
/**
155163
* title: Spring Scrollbar
164+
* hideActions: ['CSB']
156165
*/
157166
import React from 'react';
158167
import SpringScrollbarsExample from './components/SpringScrollbars/SpringScrollbarsExample';

0 commit comments

Comments
 (0)