mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-05-17 04:49:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

use react version on website

Browse Source
This commit is contained in:
Rene Haas
2022-11-16 16:01:41 +01:00
parent 400afe695e
commit b77012d714
12 changed files with 58 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/404.html
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en" data-overlayscrollbars-initialize=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="description" content="A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."/><link rel="icon" href="/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico"/><link rel="shortcut icon" type="image/x-icon" href="/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="theme-color" content="#36befd"/><meta name="msapplication-TileColor" content="#36befd"/><meta name="msapplication-navbutton-color" content="#36befd"/><meta name="application-name" content="OverlayScrollbars"/><meta name="msapplication-tooltip" content="OverlayScrollbars"/><meta name="apple-mobile-web-app-title" content="OverlayScrollbars"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"SoftwareSourceCode","url":"https://kingsora.github.io/OverlayScrollbars","name":"OverlayScrollbars","description":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.","license":"https://en.wikipedia.org/wiki/MIT_License","keywords":"js,javascript,typescript,overlayscrollbars,overlay,scrollbars,custom,scrollbar,plugin,react,vue,angular,treeshaking","isAccessibleForFree":true,"image":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/logo/logo.png","codeRepository":"https://github.com/KingSora/OverlayScrollbars","runtimePlatform":"browser","maintainer":{"@type":"Person","name":"Rene Haas","additionalName":"KingSora","url":"https://github.com/KingSora"},"programmingLanguage":{"@type":"ComputerLanguage","name":"javascript","alternateName":"js"}}</script><title>404: This page could not be found</title><meta name="next-head-count" content="14"/><link rel="preload" href="/OverlayScrollbars/_next/static/css/a0f974289bbacc23.css" as="style"/><link rel="stylesheet" href="/OverlayScrollbars/_next/static/css/a0f974289bbacc23.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/OverlayScrollbars/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/OverlayScrollbars/_next/static/chunks/webpack-38447e448aec86dd.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/framework-80c43e603d70cda7.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/main-ea1211b077f8a1ed.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/pages/_app-302faba7de8b264d.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/pages/_error-fa37e1d4331cc885.js" defer=""></script><script src="/OverlayScrollbars/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_buildManifest.js" defer=""></script><script src="/OverlayScrollbars/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_ssgManifest.js" defer=""></script></head><body data-overlayscrollbars-initialize=""><div id="__next"><div class="font-sans font-normal text-primary-dark"><div style="font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>
<!DOCTYPE html><html lang="en" data-overlayscrollbars-initialize=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="description" content="A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling."/><link rel="icon" href="/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico"/><link rel="shortcut icon" type="image/x-icon" href="/OverlayScrollbars/_next/static/media/favicon.7b344e85.ico"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="theme-color" content="#36befd"/><meta name="msapplication-TileColor" content="#36befd"/><meta name="msapplication-navbutton-color" content="#36befd"/><meta name="application-name" content="OverlayScrollbars"/><meta name="msapplication-tooltip" content="OverlayScrollbars"/><meta name="apple-mobile-web-app-title" content="OverlayScrollbars"/><script type="application/ld+json">{"@context":"http://schema.org","@type":"SoftwareSourceCode","url":"https://kingsora.github.io/OverlayScrollbars","name":"OverlayScrollbars","description":"A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.","license":"https://en.wikipedia.org/wiki/MIT_License","keywords":"js,javascript,typescript,overlayscrollbars,overlay,scrollbars,custom,scrollbar,plugin,react,vue,angular,treeshaking","isAccessibleForFree":true,"image":"https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/logo/logo.png","codeRepository":"https://github.com/KingSora/OverlayScrollbars","runtimePlatform":"browser","maintainer":{"@type":"Person","name":"Rene Haas","additionalName":"KingSora","url":"https://github.com/KingSora"},"programmingLanguage":{"@type":"ComputerLanguage","name":"javascript","alternateName":"js"}}</script><title>404: This page could not be found</title><meta name="next-head-count" content="14"/><link rel="preload" href="/OverlayScrollbars/_next/static/css/a0f974289bbacc23.css" as="style"/><link rel="stylesheet" href="/OverlayScrollbars/_next/static/css/a0f974289bbacc23.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/OverlayScrollbars/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/OverlayScrollbars/_next/static/chunks/webpack-38447e448aec86dd.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/framework-80c43e603d70cda7.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/main-ea1211b077f8a1ed.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/pages/_app-d38c742d0fd18ed3.js" defer=""></script><script src="/OverlayScrollbars/_next/static/chunks/pages/_error-fa37e1d4331cc885.js" defer=""></script><script src="/OverlayScrollbars/_next/static/VWtMpKis31Cpzj__1nYbi/_buildManifest.js" defer=""></script><script src="/OverlayScrollbars/_next/static/VWtMpKis31Cpzj__1nYbi/_ssgManifest.js" defer=""></script></head><body data-overlayscrollbars-initialize=""><div id="__next"><div class="font-sans font-normal text-primary-dark"><div style="font-family:-apple-system, BlinkMacSystemFont, Roboto, &quot;Segoe UI&quot;, &quot;Fira Sans&quot;, Avenir, &quot;Helvetica Neue&quot;, &quot;Lucida Grande&quot;, sans-serif;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div><style>
body { margin: 0; color: #000; background: #fff; }
.next-error-h1 {
border-right: 1px solid rgba(0, 0, 0, .3);
@@ -9,4 +9,4 @@
.next-error-h1 {
border-right: 1px solid rgba(255, 255, 255, .3);
}
}</style><h1 class="next-error-h1" style="display:inline-block;margin:0;margin-right:20px;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:49px;margin:0;padding:0">This page could not be found<!-- -->.</h2></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"T0Zk_s7T8c1fmmXKBC1I2","assetPrefix":"/OverlayScrollbars","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
}</style><h1 class="next-error-h1" style="display:inline-block;margin:0;margin-right:20px;padding:0 23px 0 0;font-size:24px;font-weight:500;vertical-align:top;line-height:49px">404</h1><div style="display:inline-block;text-align:left;line-height:49px;height:49px;vertical-align:middle"><h2 style="font-size:14px;font-weight:normal;line-height:49px;margin:0;padding:0">This page could not be found<!-- -->.</h2></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"VWtMpKis31Cpzj__1nYbi","assetPrefix":"/OverlayScrollbars","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
docs/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_buildManifest.js → docs/_next/static/VWtMpKis31Cpzj__1nYbi/_buildManifest.js
+1 -1
View File
@@ -1 +1 @@
self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/054cd89f2e050c9e.css","static/chunks/pages/index-6ccc9594454841fc.js"],"/_error":["static/chunks/pages/_error-fa37e1d4331cc885.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/054cd89f2e050c9e.css","static/chunks/pages/index-8b1f48702cfdc018.js"],"/_error":["static/chunks/pages/_error-fa37e1d4331cc885.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
docs/_next/static/T0Zk_s7T8c1fmmXKBC1I2/_ssgManifest.js → docs/_next/static/VWtMpKis31Cpzj__1nYbi/_ssgManifest.js
View File
docs/_next/static/chunks/pages/_app-302faba7de8b264d.js
-9
View File
File diff suppressed because one or more lines are too long
docs/_next/static/chunks/pages/_app-d38c742d0fd18ed3.js
+9
View File
File diff suppressed because one or more lines are too long
docs/_next/static/chunks/pages/index-6ccc9594454841fc.js
-5
View File
File diff suppressed because one or more lines are too long
docs/_next/static/chunks/pages/index-8b1f48702cfdc018.js
+5
View File
File diff suppressed because one or more lines are too long
docs/index.html
+27 -27
View File
File diff suppressed because one or more lines are too long
website/src/components/md/Pre.tsx
+9 -22
View File
@@ -1,26 +1,13 @@
import { useEffect, useRef } from 'react';
import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import type { ComponentProps } from 'react';
export const Pre = ({ children }: ComponentProps<'pre'>) => {
const ref = useRef(null);
const [initialize, instance] = useOverlayScrollbarsIdle({
options: {
export const Pre = ({ children }: ComponentProps<'pre'>) => (
<OverlayScrollbarsComponent
element="pre"
options={{
paddingAbsolute: true,
scrollbars: { autoHide: 'leave' },
},
});
useEffect(() => {
if (ref.current) {
initialize(ref.current);
return () => instance()?.destroy();
}
}, []);
return (
<pre ref={ref} data-overlayscrollbars-initialize>
{children}
</pre>
);
};
}}>
{children}
</OverlayScrollbarsComponent>
);
website/src/hooks/useOverlayScrollbarsIdle.ts
-66
View File
@@ -1,66 +0,0 @@
import { useEffect, useMemo } from 'react';
import { useOverlayScrollbars } from 'overlayscrollbars-react';
import type {
UseOverlayScrollbarsParams,
UseOverlayScrollbarsInitialization,
UseOverlayScrollbarsInstance,
} from 'overlayscrollbars-react';
import type { InitializationTarget } from 'overlayscrollbars';
type Defer = [
defer: (callback: () => any, options?: IdleRequestOptions) => void,
clear: () => void
];
const createDefer = (idle?: boolean): Defer => {
let id: number;
if (typeof window !== 'undefined' && window.requestIdleCallback) {
const setTFn = idle ? window.requestIdleCallback : window.requestAnimationFrame;
const clearTFn = idle ? window.cancelIdleCallback : window.cancelAnimationFrame;
return [
(callback: () => any, options?: IdleRequestOptions) => {
clearTFn(id);
id = setTFn(callback, options);
},
() => clearTFn(id),
];
}
// eslint-disable-next-line @typescript-eslint/no-empty-function
return [(callback: () => any) => callback(), () => {}];
};
export const useOverlayScrollbarsIdle = (
params?: UseOverlayScrollbarsParams
): [
(...args: Parameters<UseOverlayScrollbarsInitialization>) => void,
UseOverlayScrollbarsInstance
] => {
const [deferIdle, clearIdle] = useMemo<Defer>(() => createDefer(true), []);
const [deferRAF, clearRAF] = useMemo<Defer>(() => createDefer(), []);
const [initialize, instance] = useOverlayScrollbars(params);
useEffect(() => {
return () => {
clearRAF();
clearIdle();
instance()?.destroy();
};
}, []);
return useMemo(
() => [
(target: InitializationTarget) => {
deferIdle(
() => {
deferRAF(() => {
initialize(target);
});
},
{ timeout: 2000 }
);
},
instance,
],
[initialize, instance]
);
};
website/src/pages/_app.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import 'overlayscrollbars/overlayscrollbars.css';
import { useEffect } from 'react';
import Head from 'next/head';
import { MDXProvider } from '@mdx-js/react';
import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
import { useOverlayScrollbars } from 'overlayscrollbars-react';
import favicon from '~/assets/favicon.ico';
import { Pre } from '~/components/md/Pre';
import { Heading } from '~/components/md/Heading';
@@ -18,7 +18,7 @@ const generateHeading = (props: ComponentProps<'h1'>, tag: HeadingProps['tag'])
);
const OverlayScrollbarsDocs = ({ Component, pageProps }: AppProps) => {
const [initialize, instance] = useOverlayScrollbarsIdle();
const [initialize, instance] = useOverlayScrollbars({ defer: true });
useEffect(() => {
initialize(document.body);
website/src/pages/index.tsx
+3 -14
View File
@@ -1,6 +1,5 @@
import classnames from 'classnames';
import { useEffect, useRef } from 'react';
import { useOverlayScrollbarsIdle } from '~/hooks/useOverlayScrollbarsIdle';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { PageContainer } from '~/components/PageContainer';
import { Icon } from '~/components/Icon';
import logo from '~/assets/img/logo.svg';
@@ -23,16 +22,6 @@ const separator = (children: ReactNode) => (
);
const IndexPage: NextPage = () => {
const usedByRef = useRef<HTMLDivElement | null>(null);
const [initialize, instance] = useOverlayScrollbarsIdle();
useEffect(() => {
if (usedByRef.current) {
initialize(usedByRef.current);
return () => instance()?.destroy();
}
}, []);
return (
<PageContainer className="px-6">
<div className="mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44">
@@ -56,7 +45,7 @@ const IndexPage: NextPage = () => {
overlay scrollbars and keeps the native functionality and feeling.
</p>
{separator('used by')}
<div ref={usedByRef} data-overlayscrollbars-initialize>
<OverlayScrollbarsComponent>
<div className="flex justify-center">
<div className={classnames('inline-flex items-center gap-6 py-6', styles.usedBy)}>
<div
@@ -72,7 +61,7 @@ const IndexPage: NextPage = () => {
</div>
</div>
</div>
</div>
</OverlayScrollbarsComponent>
{separator(
<a href="https://github.com/KingSora/OverlayScrollbars" target="_blank" rel="noreferrer">