182 |
183 |
185 |
186 | ngx-simplebar
184 | NOT FOUND
10 |You just hit a route that doesn't exist... the sadness.
11 |
8 |
9 |
11 |
12 |
13 |
14 |
24 |
--------------------------------------------------------------------------------
/examples/vue-3/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Example content
10 | Example content
4 |
20 |
29 | 25 | Simplebar examples 26 |
27 |
12 |
13 | 
14 |
16 |
20 | {[...Array(50)].map((x, i) =>
21 |
24 |
25 | );
26 | }
27 | }
28 |
29 | export default App;
30 |
--------------------------------------------------------------------------------
/packages/examples/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Welcome to React
15 |
17 | To get started, edit src/App.js and save to reload.
18 |
Some content
22 | )} 23 |
28 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/packages/simplebar-core/src/scrollbar-width.ts:
--------------------------------------------------------------------------------
1 | import { canUseDOM } from './helpers';
2 |
3 | let cachedScrollbarWidth: number | null = null;
4 | let cachedDevicePixelRatio: number | null = null;
5 |
6 | if (canUseDOM) {
7 | window.addEventListener('resize', () => {
8 | if (cachedDevicePixelRatio !== window.devicePixelRatio) {
9 | cachedDevicePixelRatio = window.devicePixelRatio;
10 | cachedScrollbarWidth = null;
11 | }
12 | });
13 | }
14 |
15 | export default function scrollbarWidth() {
16 | if (cachedScrollbarWidth === null) {
17 | if (typeof document === 'undefined') {
18 | cachedScrollbarWidth = 0;
19 | return cachedScrollbarWidth;
20 | }
21 |
22 | const body = document.body;
23 | const box = document.createElement('div');
24 |
25 | box.classList.add('simplebar-hide-scrollbar');
26 |
27 | body.appendChild(box);
28 |
29 | const width = box.getBoundingClientRect().right;
30 |
31 | body.removeChild(box);
32 |
33 | cachedScrollbarWidth = width;
34 | }
35 |
36 | return cachedScrollbarWidth;
37 | }
38 |
--------------------------------------------------------------------------------
/examples/angular/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { AppComponent } from './app.component';
3 |
4 | describe('AppComponent', () => {
5 | beforeEach(async () => {
6 | await TestBed.configureTestingModule({
7 | imports: [AppComponent],
8 | }).compileComponents();
9 | });
10 |
11 | it('should create the app', () => {
12 | const fixture = TestBed.createComponent(AppComponent);
13 | const app = fixture.componentInstance;
14 | expect(app).toBeTruthy();
15 | });
16 |
17 | it(`should have the 'angular' title`, () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.componentInstance;
20 | expect(app.title).toEqual('angular');
21 | });
22 |
23 | it('should render title', () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | fixture.detectChanges();
26 | const compiled = fixture.nativeElement as HTMLElement;
27 | expect(compiled.querySelector('h1')?.textContent).toContain(
28 | 'Hello, angular'
29 | );
30 | });
31 | });
32 |
--------------------------------------------------------------------------------
/examples/vue-2.7/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-simplebar-example",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "babel-preset-vue": "^2.0.2",
12 | "simplebar-vue": "file:../../packages/simplebar-vue",
13 | "vue": "2.7.14"
14 | },
15 | "devDependencies": {
16 | "@vue/cli-plugin-babel": "^3.0.5",
17 | "@vue/cli-plugin-eslint": "^3.0.5",
18 | "@vue/cli-service": "^3.0.5",
19 | "vue-template-compiler": "2.7.14"
20 | },
21 | "eslintConfig": {
22 | "root": true,
23 | "env": {
24 | "node": true
25 | },
26 | "extends": [
27 | "plugin:vue/essential",
28 | "eslint:recommended"
29 | ],
30 | "rules": {},
31 | "parserOptions": {
32 | "parser": "babel-eslint"
33 | }
34 | },
35 | "postcss": {
36 | "plugins": {
37 | "autoprefixer": {}
38 | }
39 | },
40 | "browserslist": [
41 | "> 1%",
42 | "last 2 versions",
43 | "not ie <= 8"
44 | ]
45 | }
46 |
--------------------------------------------------------------------------------
/packages/website/src/theme.js:
--------------------------------------------------------------------------------
1 | import baseTheme from "@theme-ui/preset-base"
2 |
3 | const theme = {
4 | ...baseTheme,
5 | colors: {
6 | body: "#2e2e2e",
7 | background: "#fff",
8 | primary: "#DC8D37",
9 | },
10 | fonts: {
11 | body: '"Nunito", sans-serif',
12 | },
13 | fontWeights: {
14 | body: 500,
15 | bold: 700,
16 | heading: 800,
17 | },
18 | fontSizes: {
19 | 0: "1rem", // 10px
20 | 1: "1.2rem", // 12px
21 | 2: "1.4rem", // 14px
22 | 3: "1.6rem", // 16px
23 | 4: "1.9rem", // 19px
24 | 5: "2.3rem", // 23px
25 | 6: "2.8rem", // 28px
26 | 7: "3.8rem", // 38px
27 | 8: "4.8rem", // 48px
28 | 9: "7rem", // 70px
29 | 10: "9rem", // 90px
30 | },
31 | styles: {
32 | root: {
33 | h1: {
34 | display: "none",
35 | },
36 | h3: {
37 | mt: 4,
38 | },
39 | h4: {
40 | mt: 4,
41 | mb: 0,
42 | fontSize: 4,
43 | },
44 | "p:first-of-type": {
45 | mt: 0,
46 | },
47 | },
48 | },
49 | }
50 |
51 | theme.fontSizes.body = theme.fontSizes[3]
52 |
53 | export default theme
54 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Jonathan Nicol
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/examples/angular/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3 | "version": "2.0.0",
4 | "tasks": [
5 | {
6 | "type": "npm",
7 | "script": "start",
8 | "isBackground": true,
9 | "problemMatcher": {
10 | "owner": "typescript",
11 | "pattern": "$tsc",
12 | "background": {
13 | "activeOnStart": true,
14 | "beginsPattern": {
15 | "regexp": "(.*?)"
16 | },
17 | "endsPattern": {
18 | "regexp": "bundle generation complete"
19 | }
20 | }
21 | }
22 | },
23 | {
24 | "type": "npm",
25 | "script": "test",
26 | "isBackground": true,
27 | "problemMatcher": {
28 | "owner": "typescript",
29 | "pattern": "$tsc",
30 | "background": {
31 | "activeOnStart": true,
32 | "beginsPattern": {
33 | "regexp": "(.*?)"
34 | },
35 | "endsPattern": {
36 | "regexp": "bundle generation complete"
37 | }
38 | }
39 | }
40 | }
41 | ]
42 | }
43 |
--------------------------------------------------------------------------------
/examples/vue-3/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-v3-simplebar-example",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "babel-preset-vue": "^2.0.2",
12 | "simplebar-vue": "../../packages/simplebar-vue",
13 | "vue": "^3.2.45"
14 | },
15 | "devDependencies": {
16 | "@vue/cli-plugin-babel": "^5.0.8",
17 | "@vue/cli-plugin-eslint": "^5.0.8",
18 | "@vue/cli-service": "^5.0.8",
19 | "eslint-plugin-vue": "^9.8.0",
20 | "vue-template-compiler": "^2.7.14"
21 | },
22 | "eslintConfig": {
23 | "root": true,
24 | "env": {
25 | "node": true
26 | },
27 | "extends": [
28 | "plugin:vue/essential",
29 | "eslint:recommended"
30 | ],
31 | "rules": {},
32 | "parserOptions": {
33 | "parser": "babel-eslint"
34 | }
35 | },
36 | "postcss": {
37 | "plugins": {
38 | "autoprefixer": {}
39 | }
40 | },
41 | "browserslist": [
42 | "> 1%",
43 | "last 2 versions",
44 | "not ie <= 8"
45 | ]
46 | }
47 |
--------------------------------------------------------------------------------
/packages/website/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 gatsbyjs
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/examples/angular/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "compileOnSave": false,
5 | "compilerOptions": {
6 | "outDir": "./dist/out-tsc",
7 | "strict": true,
8 | "noImplicitOverride": true,
9 | "noPropertyAccessFromIndexSignature": true,
10 | "noImplicitReturns": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "skipLibCheck": true,
13 | "esModuleInterop": true,
14 | "sourceMap": true,
15 | "declaration": false,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "bundler",
18 | "importHelpers": true,
19 | "target": "ES2022",
20 | "module": "ES2022",
21 | "useDefineForClassFields": false,
22 | "lib": [
23 | "ES2022",
24 | "dom"
25 | ]
26 | },
27 | "angularCompilerOptions": {
28 | "enableI18nLegacyMessageIdFormat": false,
29 | "strictInjectionParameters": true,
30 | "strictInputAccessModifiers": true,
31 | "strictTemplates": true
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/examples/angular/README.md:
--------------------------------------------------------------------------------
1 | # angular
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.4.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
28 |
--------------------------------------------------------------------------------
/packages/simplebar-angular/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "ES2015",
20 | "module": "es2020",
21 | "lib": ["ES2015", "dom"],
22 | "useDefineForClassFields": false,
23 | "paths": {
24 | "simplebar-angular": ["dist/simplebar-angular"],
25 | "simplebar-angular/*": ["dist/simplebar-angular/*"]
26 | }
27 | },
28 | "angularCompilerOptions": {
29 | "enableI18nLegacyMessageIdFormat": false,
30 | "strictInjectionParameters": true,
31 | "strictInputAccessModifiers": true,
32 | "strictTemplates": true
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/simplebar-angular/src/lib/simplebar-angular.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { SimplebarAngularComponent } from './simplebar-angular.component';
4 |
5 | describe('SimplebarAngularComponent', () => {
6 | let component: SimplebarAngularComponent;
7 | let fixture: ComponentFixture↓Scrollable!↓
29 |↓Scrollable!↓
30 |↓Scrollable!↓
31 |↓Scrollable!↓
32 |↓Scrollable!↓
33 |
5 |
20 |
23 |
26 |
27 | `;
28 |
29 | exports[`simplebar snapshots renders without crashing 1`] = `
30 |
31 |
44 |
47 |
50 |
51 | `;
52 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "workspaces": {
4 | "packages": [
5 | "packages/*"
6 | ],
7 | "nohoist": [
8 | "**/webpack/**",
9 | "**/webpack-dev-server/**",
10 | "**/webpack-cli/**"
11 | ]
12 | },
13 | "scripts": {
14 | "build": "lerna exec yarn build",
15 | "test": "lerna run test",
16 | "release": "yarn build && yarn test && auto changelog && lerna publish --pre-dist-tag beta --preid beta",
17 | "start": "lerna exec --scope=simplebar yarn start",
18 | "dev": "lerna exec --scope=simplebar yarn dev"
19 | },
20 | "devDependencies": {
21 | "@babel/core": "^7.20.7",
22 | "@babel/preset-env": "^7.20.2",
23 | "@babel/preset-react": "^7.18.6",
24 | "@babel/preset-typescript": "^7.18.6",
25 | "@rollup/plugin-babel": "^6.0.3",
26 | "@rollup/plugin-commonjs": "^24.0.0",
27 | "@rollup/plugin-node-resolve": "^15.0.1",
28 | "@rollup/plugin-typescript": "^11.0.0",
29 | "@types/jest": "^29.2.5",
30 | "@types/react": "18.0.26",
31 | "@types/react-dom": "18.0.10",
32 | "@typescript-eslint/parser": "^5.48.0",
33 | "auto": "^11.3.0",
34 | "babel-core": "^7.0.0-bridge.0",
35 | "babel-eslint": "10.1.0",
36 | "babel-jest": "^29.3.1",
37 | "babel-plugin-transform-class-properties": "^6.24.1",
38 | "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
39 | "concurrently": "^4.1.2",
40 | "env-cmd": "^10.1.0",
41 | "eslint": "^7.32.0",
42 | "eslint-plugin-import": "^2.21.2",
43 | "eslint-plugin-jest": "^23.13.2",
44 | "eslint-plugin-prettier": "^3.1.4",
45 | "husky": "^1.1.4",
46 | "jest": "^29.3.1",
47 | "jest-cli": "^29.3.1",
48 | "jest-environment-jsdom": "^29.3.1",
49 | "jest-puppeteer": "^6.2.0",
50 | "lerna": "^6.4.1",
51 | "lint-staged": "^8.1.5",
52 | "minify": "^9.1.0",
53 | "prettier": "^2.0.5",
54 | "prettier-eslint": "^15.0.1",
55 | "prettier-eslint-cli": "^7.1.0",
56 | "puppeteer": "^16.2.0",
57 | "react": "^18.2.0",
58 | "react-dom": "^18.2.0",
59 | "rollup": "^3.9.1",
60 | "rollup-plugin-license": "^3.0.1",
61 | "rollup-plugin-terser": "^7.0.2",
62 | "ts-jest": "^29.0.3",
63 | "typescript": "^4.8.2",
64 | "webpack-cli": "^5.0.1"
65 | },
66 | "resolutions": {
67 | "@types/react": "18.0.26"
68 | },
69 | "husky": {
70 | "hooks": {
71 | "pre-commit": "lerna run --concurrency 1 --stream precommit"
72 | }
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/packages/simplebar-angular/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
5 |
6 | 
7 | 
8 | 
9 | 
10 |
12 | 13 | # SimplebarAngular 14 | 15 | - **🐦 Follow me on [Twitter!](https://twitter.com/adriendenat) or [Mastodon!](https://mas.to/@adrien)** 16 | - **👨💻 I'm available for hire! [Reach out to me!](https://adriendenat.com/)** 17 | - **🚧 Check out my new project [Scroll Snap Carousel](https://github.com/Grsmto/scroll-snap-carousel)!** 18 | 19 | ### Installation 20 | 21 | **- Via npm** 22 | `npm install simplebar-angular --save` 23 | 24 | **- Via Yarn** 25 | `yarn add simplebar-angular` 26 | 27 | ### Usage 28 | 29 | #### Import module 30 | 31 | ```js 32 | import { BrowserModule } from '@angular/platform-browser'; 33 | import { NgModule } from '@angular/core'; 34 | import { SimplebarAngularModule } from 'simplebar-angular'; 35 | import { AppComponent } from './app.component'; 36 | 37 | @NgModule({ 38 | declarations: [AppComponent], 39 | imports: [BrowserModule, SimplebarAngularModule], 40 | providers: [], 41 | bootstrap: [AppComponent], 42 | }) 43 | export class AppModule {} 44 | ``` 45 | 46 | #### Use component 47 | 48 | ```js 49 |
ngx-simplebar
51 |
33 |
85 | );
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/packages/examples/Playground.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Select from 'react-select';
3 |
4 | const widthOptions = [
5 | { value: 'auto', label: 'auto' },
6 | { value: '100%', label: '100%' },
7 | { value: '100px', label: '100px' },
8 | ];
9 |
10 | const heightOptions = [
11 | { value: 'auto', label: 'auto' },
12 | { value: '100%', label: '100%' },
13 | { value: '100px', label: '100px' },
14 | ];
15 |
16 | const directionOptions = [
17 | { value: 'ltr', label: 'LTR' },
18 | { value: 'rtl', label: 'RTL' },
19 | ];
20 |
21 | export default class Playground extends React.PureComponent {
22 | state = {
23 | height: '100%',
24 | width: '100%',
25 | direction: 'ltr',
26 | };
27 |
28 | render() {
29 | const { width, height, direction } = this.props;
30 |
31 | return (
32 |
34 | {this.props.children(this.state)}
35 |
36 | {width && (
37 |
38 |
39 |
51 | )}
52 | {height && (
53 |
54 |
55 |
67 | )}
68 | {direction && (
69 |
70 |
71 |
83 | )}
84 |
33 |
85 | );
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/packages/simplebar-vue/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "simplebar-vue",
3 | "version": "2.4.2",
4 | "description": "Vue component for SimpleBar",
5 | "files": [
6 | "dist",
7 | "README.md"
8 | ],
9 | "author": "Piers Olenski",
10 | "repository": {
11 | "type": "git",
12 | "url": "https://github.com/grsmto/simplebar.git",
13 | "directory": "packages/simplebar-vue"
14 | },
15 | "main": "dist/simplebar-vue.js",
16 | "module": "dist/simplebar-vue.esm.js",
17 | "sideEffects": [
18 | "*.css"
19 | ],
20 | "types": "dist/index.d.ts",
21 | "bugs": "https://github.com/grsmto/simplebar/issues",
22 | "homepage": "https://grsmto.github.io/simplebar/",
23 | "license": "MIT",
24 | "scripts": {
25 | "build": "rollup -c && minify ../simplebar-core/src/simplebar.css > dist/simplebar.min.css && cp simplebar-vue.d.ts dist/simplebar-vue.d.ts",
26 | "jest": "jest",
27 | "version": "yarn build",
28 | "precommit": "lint-staged",
29 | "test:2.7": "yarn use-vue:2.7 && yarn jest",
30 | "test:3": "yarn use-vue:3 && yarn jest",
31 | "test": "yarn test:2.7 && yarn test:3",
32 | "use-vue:2.7": "node scripts/swap-vue.js 2.7 && vue-demi-switch 2.7",
33 | "use-vue:3": "node scripts/swap-vue.js 3 && vue-demi-switch 3"
34 | },
35 | "dependencies": {
36 | "simplebar-core": "^1.3.2",
37 | "vue-demi": "^0.13.11"
38 | },
39 | "peerDependencies": {
40 | "vue": ">=2.5.17"
41 | },
42 | "devDependencies": {
43 | "@babel/core": "^7.4.3",
44 | "@vue/compiler-sfc": "^3.2.45",
45 | "@vue/composition-api": "^1.7.1",
46 | "@vue/test-utils": "^2.2.7",
47 | "@vue/test-utils-vue2": "npm:@vue/test-utils@~1",
48 | "babel-core": "^7.0.0-bridge.0",
49 | "babel-jest": "^28.1.0",
50 | "eslint-plugin-vue": "^9.8.0",
51 | "jest-serializer-vue": "^2.0.2",
52 | "rollup-plugin-vue": "^6.0.0",
53 | "vue": "^3.2.45",
54 | "vue-jest": "^5.0.0-alpha.0",
55 | "vue-jest2": "npm:vue-jest@4",
56 | "vue-template-compiler2.6": "npm:vue-template-compiler@2.6.14",
57 | "vue-template-compiler2.7": "npm:vue-template-compiler@2.7.14",
58 | "vue2.7": "npm:vue@2.7.14"
59 | },
60 | "lint-staged": {
61 | "*.{js,jsx,json}": [
62 | "prettier-eslint --write",
63 | "git add"
64 | ]
65 | },
66 | "eslintConfig": {
67 | "root": true,
68 | "env": {
69 | "node": true,
70 | "jest": true
71 | },
72 | "extends": [
73 | "plugin:vue/essential",
74 | "eslint:recommended"
75 | ],
76 | "rules": {},
77 | "parserOptions": {
78 | "parser": "babel-eslint"
79 | }
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/examples/react/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/examples/angular/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "angular": {
7 | "projectType": "application",
8 | "schematics": {},
9 | "root": "",
10 | "sourceRoot": "src",
11 | "prefix": "app",
12 | "architect": {
13 | "build": {
14 | "builder": "@angular-devkit/build-angular:application",
15 | "options": {
16 | "outputPath": "dist/angular",
17 | "index": "src/index.html",
18 | "browser": "src/main.ts",
19 | "polyfills": ["zone.js"],
20 | "tsConfig": "tsconfig.app.json",
21 | "assets": [
22 | {
23 | "glob": "**/*",
24 | "input": "public"
25 | }
26 | ],
27 | "styles": ["src/styles.css"],
28 | "scripts": [],
29 | "preserveSymlinks": true
30 | },
31 | "configurations": {
32 | "production": {
33 | "budgets": [
34 | {
35 | "type": "initial",
36 | "maximumWarning": "500kB",
37 | "maximumError": "1MB"
38 | },
39 | {
40 | "type": "anyComponentStyle",
41 | "maximumWarning": "2kB",
42 | "maximumError": "4kB"
43 | }
44 | ],
45 | "outputHashing": "all"
46 | },
47 | "development": {
48 | "optimization": false,
49 | "extractLicenses": false,
50 | "sourceMap": true
51 | }
52 | },
53 | "defaultConfiguration": "production"
54 | },
55 | "serve": {
56 | "builder": "@angular-devkit/build-angular:dev-server",
57 | "configurations": {
58 | "production": {
59 | "buildTarget": "angular:build:production"
60 | },
61 | "development": {
62 | "buildTarget": "angular:build:development"
63 | }
64 | },
65 | "defaultConfiguration": "development"
66 | },
67 | "extract-i18n": {
68 | "builder": "@angular-devkit/build-angular:extract-i18n"
69 | },
70 | "test": {
71 | "builder": "@angular-devkit/build-angular:karma",
72 | "options": {
73 | "polyfills": ["zone.js", "zone.js/testing"],
74 | "tsConfig": "tsconfig.spec.json",
75 | "assets": [
76 | {
77 | "glob": "**/*",
78 | "input": "public"
79 | }
80 | ],
81 | "styles": ["src/styles.css"],
82 | "scripts": []
83 | }
84 | }
85 | }
86 | }
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/packages/website/src/images/users/twitch.svg:
--------------------------------------------------------------------------------
1 |
2 |
13 |
--------------------------------------------------------------------------------
/packages/simplebar-vue/tests/index.test.ts:
--------------------------------------------------------------------------------
1 | import { shallowMount, destroyWrapper } from './test-utils';
2 | import simplebar from '../component';
3 | import SimpleBar from 'simplebar-core';
4 |
5 | describe('simplebar', () => {
6 | describe('snapshots', () => {
7 | /**
8 | * jest-serializer-vue is not compatible with vue3 yet, so you
9 | * cannot pass the wrapper object directly. Call .html() before
10 | * @see {@link https://github.com/eddyerburgh/jest-serializer-vue/pull/56}
11 | */
12 | it('renders without crashing', () => {
13 | const wrapper = shallowMount(simplebar);
14 | expect(wrapper.html()).toMatchSnapshot();
15 | destroyWrapper(wrapper);
16 | });
17 |
18 | it('renders with default slot', () => {
19 | const wrapper = shallowMount(simplebar, {
20 | slots: {
21 | default: '',
22 | },
23 | });
24 | expect(wrapper.html()).toMatchSnapshot();
25 | });
26 | });
27 |
28 | it('can access SimpleBar instance', () => {
29 | const wrapper = shallowMount(simplebar);
30 | expect(wrapper.vm.SimpleBar).toBeInstanceOf(SimpleBar);
31 | });
32 |
33 | it('can access root element ref property', () => {
34 | const wrapper = shallowMount(simplebar);
35 | expect(wrapper.element).toEqual(wrapper.vm.$refs.element);
36 | });
37 |
38 | it('can access scrollElement property', () => {
39 | const wrapper = shallowMount(simplebar);
40 | const scrollElement = wrapper.vm.scrollElement;
41 |
42 | expect(scrollElement).toEqual(
43 | wrapper.find('.simplebar-content-wrapper').element
44 | );
45 | });
46 |
47 | it('can access contentElement property', () => {
48 | const wrapper = shallowMount(simplebar);
49 | const scrollElement = wrapper.vm.contentElement;
50 |
51 | expect(scrollElement).toEqual(wrapper.find('.simplebar-content').element);
52 | });
53 |
54 | it('works with options as data attributes', () => {
55 | const wrapper = shallowMount(simplebar, {
56 | attrs: { 'data-simplebar-force-visible': 'true', 'tabIndex': -1 },
57 | });
58 | expect(wrapper.vm.SimpleBar.options.forceVisible).toEqual(true);
59 | expect(wrapper.vm.SimpleBar.options.tabIndex).toEqual(-1);
60 | });
61 |
62 | it('works with options as props', () => {
63 | const wrapper = shallowMount(simplebar, {
64 | propsData: { forceVisible: true },
65 | });
66 | expect(wrapper.vm.SimpleBar.options.forceVisible).toEqual(true);
67 | });
68 |
69 | it('emits a scroll event', async () => {
70 | const wrapper = shallowMount(simplebar);
71 | const scrollElement = wrapper.find('.simplebar-content-wrapper');
72 |
73 | expect(wrapper.emitted()).not.toHaveProperty('scroll');
74 | await scrollElement.trigger('scroll');
75 | expect(wrapper.emitted()).toHaveProperty('scroll');
76 | });
77 |
78 | it('destroys Simplebar instance when component is unmounted to prevent memory leaks', () => {
79 | // expect.assertions(1);
80 | const wrapper = shallowMount(simplebar);
81 | const instance = wrapper.vm.SimpleBar;
82 | jest.spyOn(instance, 'unMount');
83 |
84 | destroyWrapper(wrapper);
85 | expect(instance.unMount).toHaveBeenCalledTimes(1);
86 | });
87 | });
88 |
--------------------------------------------------------------------------------
/packages/simplebar-vue/simplebar-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'simplebar-vue' {
2 | import { DefineComponent } from 'vue';
3 | import SimpleBar from 'simplebar';
4 |
5 | export type SimpleBarComponent = DefineComponent<{ // Props
6 |
7 | /**
8 | * By default SimpleBar automatically hides the scrollbar if the user is not scrolling
9 | * (it emulates Mac OSX Lion's scrollbar). You can make the scrollbar always visible
10 | * by passing `false`.
11 | *
12 | * Default value is `true`.
13 | *
14 | * You can also control the animation via CSS as it's a simple CSS opacity transition.
15 | */
16 | autoHide?: boolean;
17 |
18 | /**
19 | * It is possible to change the default class names that SimpleBar uses.
20 | * To get your own styles to work refer to simplebar.css to get an idea how to setup your css.
21 | * - `content` represents the wrapper for the content being scrolled.
22 | * - `scrollContent` represents the container containing the elements being scrolled.
23 | * - `scrollbar` defines the style of the scrollbar with which the user can interact to scroll the content.
24 | * - `track` styles the area surrounding the `scrollbar`.
25 | *
26 | * ```js
27 | * classNames: {
28 | * // defaults
29 | * content: 'simplebar-content',
30 | * scrollContent: 'simplebar-scroll-content',
31 | * scrollbar: 'simplebar-scrollbar',
32 | * track: 'simplebar-track'
33 | * }
34 | * ```
35 | */
36 | classNames?: Partial<{ content: string; scrollContent: string; scrollbar: string; track: string }>;
37 |
38 | /**
39 | * Force the track to be visible (same behaviour as `overflow: scroll`).
40 | * Can be `boolean | 'x' | 'y'`, defaults to `false`, which behaves like `overflow: auto`.
41 | */
42 | forceVisible?: boolean | 'x' | 'y';
43 |
44 | /**
45 | * Set custom aria-label attribute for users with screen reader.
46 | */
47 | ariaLabel?: string;
48 |
49 | /**
50 | * Set custom tabIndex attribute.
51 | */
52 | tabIndex?: number;
53 |
54 | /**
55 | * Activate RTL support by passing `'rtl'`.
56 | * You will also need a css rule with `direction: rtl`.
57 | */
58 | direction?: 'ltr' | 'rtl';
59 |
60 | /**
61 | * Define the delay until the scrollbar hides. Has no effect if `autoHide` is `false`.
62 | * Default value is `1000`.
63 | */
64 | timeout?: number;
65 |
66 | /**
67 | * Controls the click on track behaviour.
68 | * Default to `true`.
69 | */
70 | clickOnTrack?: boolean;
71 |
72 | /**
73 | * Controls the min size of the scrollbar in `px`.
74 | * Default is `25`.
75 | */
76 | scrollbarMinSize?: number;
77 |
78 | /**
79 | * Controls the max size of the scrollbar in `px`.
80 | * Default is `0` (no max size).
81 | */
82 | scrollbarMaxSize?: number;
83 | },
84 | { }, // RawBindings
85 | { // Data
86 | SimpleBar: SimpleBar;
87 | contentElement: HTMLDivElement;
88 | scrollElement: HTMLDivElement;
89 | },
90 | { }, // Computed
91 | { // Methods
92 | recalculate (): void;
93 | },
94 | { }, // Mixins
95 | { }, // Extends
96 | { // Emits
97 | scroll: ($event: Event & { target: HTMLElement }) => void
98 | }>;
99 |
100 | const Component: SimpleBarComponent;
101 | export default Component;
102 | }
103 |
--------------------------------------------------------------------------------
/packages/simplebar-vue/scripts/swap-vue.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author Vuelidate
34 | {this.props.children(this.state)}
35 |
36 | {width && (
37 |
38 |
39 |
51 | )}
52 | {height && (
53 |
54 |
55 |
67 | )}
68 | {direction && (
69 |
70 |
71 |
83 | )}
84 |
2 |
3 |
5 |
6 | 
7 | 
8 |
9 |
10 |
12 | 13 | # SimplebarVue 14 | 15 | - **🐦 Follow me on [Twitter!](https://twitter.com/adriendenat) or [Mastodon!](https://mas.to/@adrien)** 16 | - **👨💻 I'm available for hire! [Reach out to me!](https://adriendenat.com/)** 17 | - **🚧 Check out my new project [Scroll Snap Carousel](https://github.com/Grsmto/scroll-snap-carousel)!** 18 | 19 | ### Installation 20 | 21 | **- Via npm** 22 | `npm install simplebar-vue --save` 23 | 24 | **- Via Yarn** 25 | `yarn add simplebar-vue` 26 | 27 | ### Usage 28 | 29 | Check out the [Demo project(vue2)](https://github.com/Grsmto/simplebar/blob/master/examples/vue-2.7/src/App.vue) and the [Demo project(vue3)](https://github.com/Grsmto/simplebar/blob/master/examples/vue-3/src/App.vue) 30 | 31 | First, register it in your Vue app: 32 | 33 | ```js 34 | import simplebar from 'simplebar-vue'; 35 | import 'simplebar-vue/dist/simplebar.min.css'; 36 | 37 | export default { 38 | components: { 39 | simplebar, 40 | }, 41 | }; 42 | ``` 43 | 44 | Then you can use it in your template 45 | 46 | ```js 47 | 48 |
73 |
74 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 | 
7 | 
8 |
9 | 
10 |
12 | 13 | SimpleBar does only one thing: replace the browser's default scrollbar with a custom CSS-styled one without losing performances. 14 | Unlike some popular plugins, SimpleBar doesn't mimic scroll with Javascript, causing janks and strange scrolling behaviours... 15 | You keep the awesomeness of native scrolling...with a custom scrollbar! 16 | SimpleBar **does NOT implement a custom scroll behaviour**. It keeps the **native** `overflow: auto` scroll and **only** replace the scrollbar visual appearance. 17 | 18 | - **🐦 Follow me on [Twitter!](https://twitter.com/adriendenat) or [Mastodon!](https://mas.to/@adrien)** 19 | - **👨💻 If you like Simplebar, [buy me a coffee!](adriendenat)** 20 | 21 |
22 |
23 | #### Design it as you want
24 |
25 | SimpleBar uses pure CSS to style the scrollbar. You can easily customize it as you want! Or even have multiple style on the same page...or just keep the default style ("Mac OS" scrollbar style).
26 |
27 | #### Lightweight and performant
28 |
29 | Only 6kb minified. SimpleBar doesn't use Javascript to handle scrolling. You keep the performances/behaviours of the native scroll.
30 |
31 | #### Supported everywhere
32 |
33 | SimpleBar has been tested on the following browsers: Chrome, Firefox, Safari, Edge, IE11.
34 |
35 | ### Getting started
36 |
37 | The easiest way to use SimpleBar is with the default dependency-free version: `npm install simplebar`.
38 |
39 | - [Core documention](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar)
40 |
41 | If you are using a framework, SimpleBar also supports the most popular ones: Vue, Angular and React.
42 |
43 | - [React documention](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-react)
44 | - [Angular documentation](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-angular)
45 | - [Vue documentation](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-vue)
46 |
47 | ### Demo
48 |
49 | You can check our [demo page](https://grsmto.github.io/simplebar/examples) (which is also the one we use for automated tests).
50 |
51 | ### Changelog
52 |
53 | See changelog here : https://github.com/Grsmto/simplebar/releases
54 |
55 | ### Credits
56 |
57 | - [KingSora](https://github.com/KingSora) for multiple features and inspirations (`height: auto` detection, RTL mode cross browser support and more) with [OverlayScrollbars](https://kingsora.github.io/OverlayScrollbars/).
58 | - [Jonathan Nicol](http://www.f6design.com/) for original idea with [Trackpad Scroll Emulator](https://github.com/jnicol/trackpad-scroll-emulator).
59 | - [Cassio Bittencourt](https://cassiobittencourt.com/) for the logo design.
60 |
--------------------------------------------------------------------------------
/packages/website/src/components/Layout.js:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { jsx, ThemeProvider } from "theme-ui"
3 | import PropTypes from "prop-types"
4 | import { Global } from "@emotion/core"
5 | import { withPrefix } from "gatsby"
6 |
7 | import theme from "../theme"
8 |
9 | import browserstackLogoUrl from "../images/browserstack.png"
10 |
11 | import "modern-normalize/modern-normalize.css"
12 | import "typeface-nunito"
13 |
14 | const Layout = ({ children, ...otherProps }) => {
15 | return (
16 |
81 | {children}
82 |
116 |
117 |
9 |
10 | {[...Array(5)].map((_, i) => (
11 |
14 |
15 | );
16 | expect(container.firstChild).toMatchSnapshot();
17 | });
18 |
19 | test('renders with options', () => {
20 | const { container } = render(
21 | Some content
12 | ))} 13 |Some content
24 | ))} 25 |Some content
43 | ))} 44 |Some content
60 | ))} 61 |Some content
81 | ))} 82 |Some content
101 | ))} 102 |Some content
121 | ))} 122 |
44 |
54 |
45 | })
52 |
53 | 63 | Custom scrollbars made simple, lightweight, easy to use and 64 | cross-browser. 65 |
66 |
67 |
74 |
85 |
86 | Who is using it?
106 |-
117 |
98 |
133 | );
134 | }
135 | );
136 |
137 | SimpleBar.displayName = 'SimpleBar';
138 |
139 | export default SimpleBar;
140 |
--------------------------------------------------------------------------------
/packages/website/src/images/users/storybook.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/simplebar-core/src/simplebar.css:
--------------------------------------------------------------------------------
1 | [data-simplebar] {
2 | position: relative;
3 | flex-direction: column;
4 | flex-wrap: wrap;
5 | justify-content: flex-start;
6 | align-content: flex-start;
7 | align-items: flex-start;
8 | }
9 |
10 | .simplebar-wrapper {
11 | overflow: hidden;
12 | width: inherit;
13 | height: inherit;
14 | max-width: inherit;
15 | max-height: inherit;
16 | }
17 |
18 | .simplebar-mask {
19 | direction: inherit;
20 | position: absolute;
21 | overflow: hidden;
22 | padding: 0;
23 | margin: 0;
24 | left: 0;
25 | top: 0;
26 | bottom: 0;
27 | right: 0;
28 | width: auto !important;
29 | height: auto !important;
30 | z-index: 0;
31 | }
32 |
33 | .simplebar-offset {
34 | direction: inherit !important;
35 | box-sizing: inherit !important;
36 | resize: none !important;
37 | position: absolute;
38 | top: 0;
39 | left: 0;
40 | bottom: 0;
41 | right: 0;
42 | padding: 0;
43 | margin: 0;
44 | -webkit-overflow-scrolling: touch;
45 | }
46 |
47 | .simplebar-content-wrapper {
48 | direction: inherit;
49 | box-sizing: border-box !important;
50 | position: relative;
51 | display: block;
52 | height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
53 | width: auto;
54 | max-width: 100%; /* Not required for horizontal scroll to trigger */
55 | max-height: 100%; /* Needed for vertical scroll to trigger */
56 | overflow: auto;
57 | scrollbar-width: none;
58 | -ms-overflow-style: none;
59 | }
60 |
61 | .simplebar-content-wrapper::-webkit-scrollbar,
62 | .simplebar-hide-scrollbar::-webkit-scrollbar {
63 | display: none;
64 | width: 0;
65 | height: 0;
66 | }
67 |
68 | .simplebar-content:before,
69 | .simplebar-content:after {
70 | content: ' ';
71 | display: table;
72 | }
73 |
74 | .simplebar-placeholder {
75 | max-height: 100%;
76 | max-width: 100%;
77 | width: 100%;
78 | pointer-events: none;
79 | }
80 |
81 | .simplebar-height-auto-observer-wrapper {
82 | box-sizing: inherit !important;
83 | height: 100%;
84 | width: 100%;
85 | max-width: 1px;
86 | position: relative;
87 | float: left;
88 | max-height: 1px;
89 | overflow: hidden;
90 | z-index: -1;
91 | padding: 0;
92 | margin: 0;
93 | pointer-events: none;
94 | flex-grow: inherit;
95 | flex-shrink: 0;
96 | flex-basis: 0;
97 | }
98 |
99 | .simplebar-height-auto-observer {
100 | box-sizing: inherit;
101 | display: block;
102 | opacity: 0;
103 | position: absolute;
104 | top: 0;
105 | left: 0;
106 | height: 1000%;
107 | width: 1000%;
108 | min-height: 1px;
109 | min-width: 1px;
110 | overflow: hidden;
111 | pointer-events: none;
112 | z-index: -1;
113 | }
114 |
115 | .simplebar-track {
116 | z-index: 1;
117 | position: absolute;
118 | right: 0;
119 | bottom: 0;
120 | pointer-events: none;
121 | overflow: hidden;
122 | }
123 |
124 | [data-simplebar].simplebar-dragging {
125 | pointer-events: none;
126 | -webkit-touch-callout: none;
127 | -webkit-user-select: none;
128 | -khtml-user-select: none;
129 | -moz-user-select: none;
130 | -ms-user-select: none;
131 | user-select: none;
132 | }
133 |
134 | [data-simplebar].simplebar-dragging .simplebar-content {
135 | pointer-events: none;
136 | -webkit-touch-callout: none;
137 | -webkit-user-select: none;
138 | -khtml-user-select: none;
139 | -moz-user-select: none;
140 | -ms-user-select: none;
141 | user-select: none;
142 | }
143 |
144 | [data-simplebar].simplebar-dragging .simplebar-track {
145 | pointer-events: all;
146 | }
147 |
148 | .simplebar-scrollbar {
149 | position: absolute;
150 | left: 0;
151 | right: 0;
152 | min-height: 10px;
153 | }
154 |
155 | .simplebar-scrollbar:before {
156 | position: absolute;
157 | content: '';
158 | background: black;
159 | border-radius: 7px;
160 | left: 2px;
161 | right: 2px;
162 | opacity: 0;
163 | transition: opacity 0.2s 0.5s linear;
164 | }
165 |
166 | .simplebar-scrollbar.simplebar-visible:before {
167 | opacity: 0.5;
168 | transition-delay: 0s;
169 | transition-duration: 0s;
170 | }
171 |
172 | .simplebar-track.simplebar-vertical {
173 | top: 0;
174 | width: 11px;
175 | }
176 |
177 | .simplebar-scrollbar:before {
178 | top: 2px;
179 | bottom: 2px;
180 | left: 2px;
181 | right: 2px;
182 | }
183 |
184 | .simplebar-track.simplebar-horizontal {
185 | left: 0;
186 | height: 11px;
187 | }
188 |
189 | .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
190 | right: auto;
191 | left: 0;
192 | top: 0;
193 | bottom: 0;
194 | min-height: 0;
195 | min-width: 10px;
196 | width: auto;
197 | }
198 |
199 | /* Rtl support */
200 | [data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
201 | right: auto;
202 | left: 0;
203 | }
204 |
205 | .simplebar-dummy-scrollbar-size {
206 | direction: rtl;
207 | position: fixed;
208 | opacity: 0;
209 | visibility: hidden;
210 | height: 500px;
211 | width: 500px;
212 | overflow-y: hidden;
213 | overflow-x: scroll;
214 | -ms-overflow-style: scrollbar !important;
215 | }
216 |
217 | .simplebar-dummy-scrollbar-size > div {
218 | width: 200%;
219 | height: 200%;
220 | margin: 10px 0;
221 | }
222 |
223 | .simplebar-hide-scrollbar {
224 | position: fixed;
225 | left: 0;
226 | visibility: hidden;
227 | overflow-y: scroll;
228 | scrollbar-width: none;
229 | -ms-overflow-style: none;
230 | }
231 |
--------------------------------------------------------------------------------
/packages/simplebar-react/README.md:
--------------------------------------------------------------------------------
1 |
99 |
126 |
100 |
101 |
102 |
103 |
124 |
125 |
104 | {typeof children === 'function' ? (
105 | children({
106 | scrollableNodeRef,
107 | scrollableNodeProps: {
108 | ...scrollableNodeFullProps,
109 | ref: scrollableNodeRef,
110 | },
111 | contentNodeRef,
112 | contentNodeProps: {
113 | className: classNames.contentEl,
114 | ref: contentNodeRef,
115 | },
116 | })
117 | ) : (
118 |
123 |
119 |
121 | )}
122 | {children}
120 |
127 |
128 |
129 |
130 |
131 |
132 |
2 |
3 |
5 |
6 | 
7 | 
8 |
9 |
10 |
12 | 13 | # SimplebarReact 14 | 15 | - **🐦 Follow me on [Twitter!](https://twitter.com/adriendenat) or [Mastodon!](https://mas.to/@adrien)** 16 | - **👨💻 I'm available for hire! [Reach out to me!](https://adriendenat.com/)** 17 | - **🚧 Check out my new project [Scroll Snap Carousel](https://github.com/Grsmto/scroll-snap-carousel)!** 18 | 19 | ### Installation 20 | 21 | **- Via npm** 22 | `npm install simplebar-react --save` 23 | 24 | **- Via Yarn** 25 | `yarn add simplebar-react` 26 | 27 | ### Usage 28 | 29 | Check out the [Demo project](https://github.com/Grsmto/simplebar/blob/master/examples/react/src/App.js) or our live [Codesandbox example](https://codesandbox.io/s/simplebar-react-gwgyw). 30 | 31 | If you are using a module loader (like Webpack) you first need to load SimpleBar: 32 | 33 | ```js 34 | import SimpleBar from 'simplebar-react'; 35 | import 'simplebar-react/dist/simplebar.min.css'; 36 | 37 | const App = () => ( 38 |
57 |
58 |
59 | 1. [Documentation](#1-documentation)
60 |
61 | ## 1. Documentation
62 |
63 | ### Passing options
64 |
65 | Find the list of available options on [the core documentation](https://github.com/Grsmto/simplebar/blob/master/packages/simplebar/README.md#options).
66 |
67 | ```js
68 |
124 | outer/scrollable element
125 | inner element
126 |
127 | );
128 | }}
129 |
7 |
77 | `;
78 |
79 | exports[`renders with options 1`] = `
80 |
154 | `;
155 |
156 | exports[`renders without crashing 1`] = `
157 |
10 |
17 |
53 |
57 |
58 |
67 |
76 |
158 |
232 | `;
233 |
--------------------------------------------------------------------------------
/examples/angular/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
179 |
180 |
161 |
212 |
221 |
230 |
231 | ${template}
`;
28 | });
29 |
30 | test('should call constructor', () => {
31 | const SimpleBar = require('../src/index').default;
32 | jest.mock('../src/index');
33 |
34 | new SimpleBar(document.getElementById('simplebar'));
35 |
36 | expect(SimpleBar).toHaveBeenCalledTimes(1);
37 | });
38 |
39 | test('should return the content element', () => {
40 | const simpleBar = new SimpleBar(
41 | document.getElementById('simplebar') as HTMLElement
42 | );
43 | const contentElement = simpleBar.getContentElement();
44 |
45 | expect(contentElement).toBe(simpleBar.contentEl);
46 | });
47 |
48 | test('should return the scroll element', () => {
49 | const simpleBar = new SimpleBar(
50 | document.getElementById('simplebar') as HTMLElement
51 | );
52 | const scrollElement = simpleBar.getScrollElement();
53 |
54 | expect(scrollElement).toBe(simpleBar.contentWrapperEl);
55 | });
56 |
57 | test('should unmount SimpleBar', () => {
58 | const simpleBar = new SimpleBar(
59 | document.getElementById('simplebar') as HTMLElement
60 | );
61 | const mock = jest.spyOn(simpleBar.mutationObserver as any, 'disconnect');
62 |
63 | simpleBar.unMount();
64 |
65 | expect(mock).toHaveBeenCalled();
66 | });
67 |
68 | test('should return the element options', () => {
69 | const simpleBar = new SimpleBar(
70 | document.getElementById('simplebar') as HTMLElement
71 | );
72 |
73 | expect(SimpleBar.getOptions(simpleBar.el.attributes)).toEqual({
74 | forceVisible: true,
75 | });
76 | });
77 |
78 | test('getOptions accepts objects', () => {
79 | expect(
80 | SimpleBar.getOptions([
81 | {
82 | name: 'data-simplebar-class-names',
83 | value: {
84 | wrapper: 'custom-class',
85 | },
86 | },
87 | ])
88 | ).toEqual({ classNames: { wrapper: 'custom-class' } });
89 | });
90 |
91 | test('classNames option works with multiple classes', () => {
92 | const simpleBar = new SimpleBar(
93 | document.getElementById('simplebar') as HTMLElement,
94 | { classNames: { contentWrapper: 'simplebar-content-wrapper custom-class' } }
95 | );
96 | const scrollElement = simpleBar.getScrollElement();
97 |
98 | expect(scrollElement?.className).toEqual(
99 | 'simplebar-content-wrapper custom-class'
100 | );
101 | });
102 |
103 | test('mouse should be within bounds', () => {
104 | const simpleBar = new SimpleBar(
105 | document.getElementById('simplebar') as HTMLElement
106 | );
107 |
108 | simpleBar.mouseX = 20;
109 | simpleBar.mouseY = 20;
110 |
111 | const isWithinBounds = simpleBar.isWithinBounds({
112 | bottom: 110,
113 | height: 100,
114 | left: 10,
115 | right: 110,
116 | top: 10,
117 | width: 100,
118 | x: 10,
119 | y: 10,
120 | } as DOMRect);
121 |
122 | expect(isWithinBounds).toBeTruthy();
123 | });
124 |
125 | test('onPointerEvent listener should be unsubscribed on unmount', () => {
126 | const element = document.getElementById('simplebar');
127 | const init = SimpleBar.prototype.init;
128 |
129 | if (!element) return;
130 |
131 | SimpleBar.prototype.init = () => {};
132 |
133 | const simpleBar = new SimpleBar(element);
134 |
135 | simpleBar.init = init;
136 |
137 | jest.spyOn(simpleBar, 'onPointerEvent');
138 |
139 | simpleBar.init();
140 |
141 | simpleBar.unMount();
142 |
143 | element.dispatchEvent(new MouseEvent('mousedown'));
144 |
145 | expect(simpleBar.onPointerEvent).not.toHaveBeenCalled();
146 | });
147 |
148 | describe('nested SimpleBars with initiated DOM', () => {
149 | let parent: SimpleBar;
150 | let child: SimpleBar;
151 |
152 | beforeEach(() => {
153 | // Set up our document body
154 | document.body.innerHTML = `${template}
`;
155 |
156 | parent = new SimpleBar(
157 | document.getElementById('simplebar-parent') as HTMLElement
158 | );
159 | child = new SimpleBar(
160 | document.getElementById('simplebar-child') as HTMLElement
161 | );
162 |
163 | parent.initDOM(); // trigger DOM selectors
164 | });
165 |
166 | test('should select correct wrapper element', () => {
167 | expect(parent.wrapperEl).not.toBe(child.wrapperEl);
168 | });
169 |
170 | test('should select correct content wrapper element', () => {
171 | expect(parent.contentWrapperEl).not.toBe(child.contentWrapperEl);
172 | });
173 |
174 | test('should select correct content element', () => {
175 | expect(parent.contentEl).not.toBe(child.contentEl);
176 | });
177 |
178 | test('should select correct offset element', () => {
179 | expect(parent.offsetEl).not.toBe(child.offsetEl);
180 | });
181 |
182 | test('should select correct mask element', () => {
183 | expect(parent.maskEl).not.toBe(child.maskEl);
184 | });
185 |
186 | test('should select correct placeholder element', () => {
187 | expect(parent.placeholderEl).not.toBe(child.placeholderEl);
188 | });
189 |
190 | test('should select correct height auto observer wrapper element', () => {
191 | expect(parent.heightAutoObserverWrapperEl).not.toBe(
192 | child.heightAutoObserverWrapperEl
193 | );
194 | });
195 |
196 | test('should select correct height auto observer element', () => {
197 | expect(parent.heightAutoObserverEl).not.toBe(child.heightAutoObserverEl);
198 | });
199 |
200 | test('should select correct x track element', () => {
201 | expect(parent.axis.x.track.el).not.toBe(child.axis.x.track.el);
202 | });
203 |
204 | test('should select correct y track element', () => {
205 | expect(parent.axis.y.track.el).not.toBe(child.axis.y.track.el);
206 | });
207 | });
208 |
--------------------------------------------------------------------------------
${template}