@ehfuse/overlay-scrollbar 1.2.1 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +102 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/src/OverlayScrollbar.d.ts +1 -1
- package/dist/src/OverlayScrollbar.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -121,6 +121,108 @@ function App() {
|
|
|
121
121
|
}
|
|
122
122
|
```
|
|
123
123
|
|
|
124
|
+
## API Reference
|
|
125
|
+
|
|
126
|
+
### Types
|
|
127
|
+
|
|
128
|
+
The package exports TypeScript types for better development experience:
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
import {
|
|
132
|
+
OverlayScrollbar,
|
|
133
|
+
OverlayScrollbarProps,
|
|
134
|
+
OverlayScrollbarRef,
|
|
135
|
+
} from "@ehfuse/overlay-scrollbar";
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### OverlayScrollbarProps
|
|
139
|
+
|
|
140
|
+
Interface for the component props:
|
|
141
|
+
|
|
142
|
+
```tsx
|
|
143
|
+
interface OverlayScrollbarProps {
|
|
144
|
+
className?: string;
|
|
145
|
+
style?: React.CSSProperties;
|
|
146
|
+
children: ReactNode;
|
|
147
|
+
onScroll?: (event: Event) => void;
|
|
148
|
+
|
|
149
|
+
// Sizing & Layout
|
|
150
|
+
scrollbarWidth?: number; // deprecated, use trackWidth/thumbWidth instead
|
|
151
|
+
thumbRadius?: number; // Border radius of thumb (default: thumbWidth / 2)
|
|
152
|
+
trackWidth?: number; // Width of hover area (default: 16px)
|
|
153
|
+
thumbWidth?: number; // Width of thumb and track background (default: 8px)
|
|
154
|
+
thumbMinHeight?: number; // Minimum height of thumb (default: 50px)
|
|
155
|
+
|
|
156
|
+
// Colors
|
|
157
|
+
trackColor?: string; // Track background color (default: "rgba(128, 128, 128, 0.1)")
|
|
158
|
+
thumbColor?: string; // Thumb color (default: "rgba(128, 128, 128, 0.6)")
|
|
159
|
+
thumbActiveColor?: string; // Thumb color when dragging (default: "rgba(128, 128, 128, 0.9)")
|
|
160
|
+
arrowColor?: string; // Arrow color (default: "rgba(128, 128, 128, 0.8)")
|
|
161
|
+
arrowActiveColor?: string; // Arrow color on hover (default: "rgba(64, 64, 64, 1.0)")
|
|
162
|
+
|
|
163
|
+
// Arrow Navigation
|
|
164
|
+
showArrows?: boolean; // Show arrow buttons (default: false)
|
|
165
|
+
arrowStep?: number; // Scroll distance per arrow click (default: 50px)
|
|
166
|
+
|
|
167
|
+
// Auto-hide Behavior
|
|
168
|
+
hideDelay?: number; // Default auto-hide delay (default: 1500ms)
|
|
169
|
+
hideDelayOnWheel?: number; // Auto-hide delay after wheel scroll (default: 700ms)
|
|
170
|
+
}
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
### OverlayScrollbarRef
|
|
174
|
+
|
|
175
|
+
Interface for component methods accessible via ref:
|
|
176
|
+
|
|
177
|
+
```tsx
|
|
178
|
+
interface OverlayScrollbarRef {
|
|
179
|
+
getScrollContainer: () => HTMLDivElement | null;
|
|
180
|
+
scrollTo: (options: ScrollToOptions) => void;
|
|
181
|
+
scrollTop: number;
|
|
182
|
+
scrollHeight: number;
|
|
183
|
+
clientHeight: number;
|
|
184
|
+
}
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
### Usage with TypeScript
|
|
188
|
+
|
|
189
|
+
```tsx
|
|
190
|
+
import React, { useRef } from "react";
|
|
191
|
+
import {
|
|
192
|
+
OverlayScrollbar,
|
|
193
|
+
OverlayScrollbarProps,
|
|
194
|
+
OverlayScrollbarRef,
|
|
195
|
+
} from "@ehfuse/overlay-scrollbar";
|
|
196
|
+
|
|
197
|
+
const MyComponent: React.FC = () => {
|
|
198
|
+
const scrollRef = useRef<OverlayScrollbarRef>(null);
|
|
199
|
+
|
|
200
|
+
const scrollbarProps: OverlayScrollbarProps = {
|
|
201
|
+
showArrows: true,
|
|
202
|
+
thumbRadius: 6,
|
|
203
|
+
trackColor: "rgba(0, 0, 0, 0.1)",
|
|
204
|
+
thumbColor: "rgba(100, 100, 100, 0.7)",
|
|
205
|
+
hideDelay: 1500,
|
|
206
|
+
onScroll: (event) => {
|
|
207
|
+
console.log("Scrolled!", scrollRef.current?.scrollTop);
|
|
208
|
+
},
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
const handleScrollToTop = () => {
|
|
212
|
+
scrollRef.current?.scrollTo({ top: 0, behavior: "smooth" });
|
|
213
|
+
};
|
|
214
|
+
|
|
215
|
+
return (
|
|
216
|
+
<div style={{ height: "400px" }}>
|
|
217
|
+
<button onClick={handleScrollToTop}>Scroll to Top</button>
|
|
218
|
+
<OverlayScrollbar ref={scrollRef} {...scrollbarProps}>
|
|
219
|
+
<div style={{ height: "1000px" }}>Your content here...</div>
|
|
220
|
+
</OverlayScrollbar>
|
|
221
|
+
</div>
|
|
222
|
+
);
|
|
223
|
+
};
|
|
224
|
+
```
|
|
225
|
+
|
|
124
226
|
## Browser Support
|
|
125
227
|
|
|
126
228
|
- Chrome/Edge: Full support
|
package/dist/index.d.ts
CHANGED
|
@@ -56,4 +56,4 @@ interface OverlayScrollbarRef {
|
|
|
56
56
|
declare const OverlayScrollbar: React.ForwardRefExoticComponent<OverlayScrollbarProps & React.RefAttributes<OverlayScrollbarRef>>;
|
|
57
57
|
|
|
58
58
|
export { OverlayScrollbar, OverlayScrollbar as default };
|
|
59
|
-
export type { OverlayScrollbarRef };
|
|
59
|
+
export type { OverlayScrollbarProps, OverlayScrollbarRef };
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,gBAAgB,IAAI,OAAO,EAC3B,gBAAgB,GACnB,MAAM,wBAAwB,CAAC;AAChC,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,gBAAgB,IAAI,OAAO,EAC3B,gBAAgB,GACnB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EACR,mBAAmB,EACnB,qBAAqB,GACxB,MAAM,wBAAwB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayScrollbar.d.ts","sourceRoot":"","sources":["../../src/OverlayScrollbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,EAAE,EAMV,SAAS,EAGZ,MAAM,OAAO,CAAC;AAEf,
|
|
1
|
+
{"version":3,"file":"OverlayScrollbar.d.ts","sourceRoot":"","sources":["../../src/OverlayScrollbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,EAAE,EAMV,SAAS,EAGZ,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,qBAAqB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAGD,MAAM,WAAW,mBAAmB;IAChC,kBAAkB,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IAChD,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,mGA8oBrB,CAAC;AAEF,eAAe,gBAAgB,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
package/package.json
CHANGED