├── .editorconfig ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .storybook ├── index.css ├── main.js └── preview.js ├── CONTRIBUTING.md ├── README.md ├── package.json ├── rollup.config.js ├── src ├── ReactSmartScroll │ ├── SmartScrollRow │ │ └── index.tsx │ ├── hooks │ │ ├── useComponentHeight.ts │ │ └── useScrollTop.ts │ ├── index.tsx │ └── utils.ts ├── index.js ├── index.ts ├── react-app-env.d.ts ├── setupTests.ts ├── stories │ ├── TestRow │ │ └── index.tsx │ ├── index.stories.tsx │ └── testData.ts └── types.ts ├── tsconfig.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs. 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | # We recommend you to keep these unchanged. 10 | charset = utf-8 11 | end_of_line = lf 12 | indent_size = 4 13 | indent_style = space 14 | insert_final_newline = true 15 | trim_trailing_whitespace = true 16 | 17 | [package.json] 18 | indent_size = 2 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /coverage 2 | /dist 3 | /node_modules 4 | /umd 5 | npm-debug.log* 6 | .DS_Store 7 | .idea 8 | .vscode 9 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .prettierignore 2 | package.json 3 | package-lock.json 4 | yarn.lock 5 | README.md 6 | .env 7 | .env.* 8 | .editorconfig 9 | *.yml 10 | .gitignore 11 | *.svg 12 | public/index.html 13 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSpacing": false, 3 | "singleQuote": true, 4 | "tabWidth": 4, 5 | "arrowParens": "avoid" 6 | } 7 | -------------------------------------------------------------------------------- /.storybook/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Helvetica, Arial, sans-serif; 3 | text-align: left; 4 | padding: 10px; 5 | } 6 | 7 | .demo-smart-scroll { 8 | position: relative; 9 | width: 60%; 10 | height: calc(100vh - 150px); 11 | border: 1px solid rgba(0, 0, 0, 0.1); 12 | overflow-y: scroll; 13 | } 14 | 15 | .test-row { 16 | position: relative; 17 | padding: 10px; 18 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); 19 | cursor: pointer; 20 | user-select: none; 21 | } 22 | 23 | .test-row:last-child { 24 | border-bottom: 0; 25 | } 26 | 27 | .click-status { 28 | position: relative; 29 | margin: 10px 0; 30 | } 31 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "stories": [ 3 | "../src/**/*.stories.mdx", 4 | "../src/**/*.stories.@(js|jsx|ts|tsx)" 5 | ], 6 | "addons": [ 7 | "@storybook/addon-links", 8 | "@storybook/addon-essentials", 9 | "@storybook/preset-create-react-app" 10 | ] 11 | } -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import './index.css'; 2 | 3 | export const parameters = { 4 | actions: {argTypesRegex: '^on[A-Z].*'}, 5 | controls: { 6 | matchers: { 7 | color: /(background|color)$/i, 8 | date: /Date$/, 9 | }, 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Prerequisites 2 | 3 | [Node.js](http://nodejs.org/) >= 10 must be installed. 4 | 5 | ## Installation 6 | 7 | - Running `yarn` in the component's root directory will install everything you need for development. 8 | 9 | ## Storybook Development 10 | 11 | - `yarn run storybook` will run Storybook. 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-smart-scroll 2 | 3 | [![npm version](https://badge.fury.io/js/react-smart-scroll.svg)](//npmjs.com/package/react-smart-scroll) 4 | 5 | ReactSmartScroll is a lightweight, high-performance, easy-to-use way to render long lists efficiently in React. It only renders the visible rows, with a few buffer rows above and below. 6 | 7 | ReactSmartScroll is (mostly) un-opinionated, with minimum configuration. It has automatic support for variable height rows, even if they change height at runtime due to resizing, expanding, etc. 8 | 9 | ### Installation 10 | ``` 11 | // npm 12 | npm i -S react-smart-scroll 13 | 14 | // yarn 15 | yarn add react-smart-scroll 16 | ``` 17 | 18 | ### Super Simple Sample: 19 | ```javascript 20 | import ReactSmartScroll from 'react-smart-scroll'; 21 | 22 | const data = [ 23 | {id: 1, text: 'Hello'}, 24 | {id: 2, text: 'World'}, 25 | ]; 26 | 27 | const TestRow = ({data, rowRef}) => ( 28 |
29 | {data.text} 30 |
31 | ); 32 | 33 | export default () => ( 34 | 35 | ); 36 | ``` 37 | 38 | ### TypeScript 39 | Typing for your row components is included as a named export. 40 | ```typescript jsx 41 | import {ReactSmartScrollRow} from 'react-smart-scroll'; 42 | 43 | const TypedTestRow: ReactSmartScrollRow = ({data, rowRef}) => ( 44 |
45 | {data.text} 46 |
47 | ); 48 | ``` 49 | 50 | ### Working Demo with variable height rows: 51 | * [JavaScript Demo](https://codesandbox.io/s/react-smart-scroll-demo-3x1ym) 52 | * [TypeScript Demo](https://codesandbox.io/s/react-smart-scroll-ts-demo-9p3kz) 53 | 54 | **This component uses React Hooks, so it requires React 16.8.x or above.** 55 | 56 | ## How To Use 57 | ReactSmartScroll is designed to be simple to use. You can check the `demo` folder for an example, as well. 58 | 59 | At its most basic, you pass an array of data and a row component to render the items in the array. 60 | 61 | #### Props 62 | - `className` - A css className that will be applied to the component. 63 | - `data` - An array of items to be passed to your row component. 64 | - `overflow` - You can set this to `auto` or `scroll` ("auto" is the default). 65 | - `row` - Your row component. 66 | - `rowHeight` - Starting row height (100 by default) - it starts with this as an estimate for all rows, and then measures and caches the actual height of each row is as you scroll. 67 | - `startAt` - You can pass an index to start the list at (0 by default). 68 | - `style` - A style object applied to the component if you prefer using inline styling instead of css. 69 | - `...rowProps` - Any additional props you pass will be applied to your row components, for example `onClick`. 70 | 71 | 72 | All of the props are optional. If you don't provide any data or a row component, it won't render anything, but it won't cause any errors, either. 73 | 74 | You need to apply `height`, either in the css class or the style object. You can use a specific height, or `calc()`. 75 | 76 | Due to a CSS limitation with how overflow works with padding, `height: 100%` does not work. 77 | 78 | The `overflow` default value of `auto` is applied via `style`. If you want to use a css class to control it, you need to pass `null`, `undefined`, or an empty string to `overflow`. If you use a style object, you can set it there, since the default `auto` is applied before your style object and thus can be overwritten that way. 79 | 80 | ```javascript 81 | import ReactSmartScroll, {ReactSmartScrollRow} from 'react-smart-scroll'; 82 | 83 | console.log('Hello!')} // passed to row components 90 | label="My text is: " // passed to row components 91 | /> 92 | 93 | const TestRow: ReactSmartScrollRow = ({data, height, label, onClick, rowIndex, rowRef}) => ( 94 |
onClick(rowIndex)}> 95 | [{data.id}]: {height}px
96 | :

{data.text}

97 |
98 | ); 99 | ``` 100 | 101 | The `data` array can be made up of objects or strings. ReactSmartScroll passes the items in the array directly to your row component so you have complete freedom in how the rows render. If you pass an object with an `id` property, it will use the `id` as the key for each row, which can be more efficient than using the row index. 102 | 103 | Your row component receives the following props: 104 | - `data` - The item in the data array that corresponds to this row. 105 | - `height` - The current measured height of the row. It's provided for debugging or if you have a use for it. 106 | - `rowIndex` - The index of the item in the data array. Also provided for debugging, use if you like. 107 | - `rowRef` - *required* You need to include `ref={rowRef}` prop on your row component's container element. 108 | - `...rowProps` - Any additional props you passed to the ReactSmartScroll component will be available on every row. 109 | 110 | ## How It Works 111 | ReactSmartScroll renders enough rows to fill the visible space of the scroll area, plus an extra one above and below. It measures the height of each of the visible row and caches that height as you scroll (or resize) so that the next render of the same row is more efficient. It simulates the total height of all the items by adjusting the padding top and bottom of the div that contains the rows as you scroll. 112 | 113 | Unlike other virtual scrolling components/libraries, there are no unnecessary wrapper divs for your rows, it doesn't use absolute positioning, and doesn't require any polyfills. 114 | 115 | #### Firefox Note 116 | The latest version of Firefox doesn't seem to keep up with React's rendering speed with `useLayoutEffect()` or `useEffect()`, so if you grab the scrollbar and scroll up and down really fast, you'll see blank space momentarily. Other browsers don't appear to have this problem. Using the mouse wheel to scroll looks good in all browsers. 117 | 118 | ### rowRef Note 119 | >Why does React Smart Scroll pass `rowRef` instead of just passing `ref`? 120 | 121 | This removes the burden of having to wrap functional row components with `React.forwardRef()`. 122 | 123 | IMO, it's easier and more flexible for you to use `rowRef`. 124 | 125 | ## Closing Note 126 | I hope you enjoy using this component as much as I enjoyed making it! 127 | 128 | Follow me: 129 | - twitter: https://twitter.com/stevensacks 130 | - github: https://github.com/stevensacks 131 | - gitlab: https://gitlab.com/stevensacks 132 | - linkedin: https://www.linkedin.com/in/stevensacks 133 | 134 | [npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square 135 | [npm]: https://www.npmjs.org/package/npm-package 136 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-smart-scroll", 3 | "version": "1.3.0", 4 | "description": "Smart Scroll React Component for long lists", 5 | "author": "Steven Sacks", 6 | "homepage": "https://github.com/stevensacks/react-smart-scroll", 7 | "license": "MIT", 8 | "repository": "https://github.com/stevensacks/react-smart-scroll", 9 | "keywords": [ 10 | "react", 11 | "react scroll", 12 | "react smart scroll", 13 | "react virtual scrolling", 14 | "react virtualized scrolling", 15 | "react list", 16 | "react list scroll" 17 | ], 18 | "main": "./dist/index.js", 19 | "module": "./dist/index.es.js", 20 | "types": "./dist/index.d.ts", 21 | "files": [ 22 | "dist" 23 | ], 24 | "scripts": { 25 | "build": "rollup -c", 26 | "test": "react-scripts test", 27 | "prepublishOnly": "npm run build", 28 | "storybook": "start-storybook -p 6006 -s public", 29 | "build-storybook": "build-storybook -s public" 30 | }, 31 | "devDependencies": { 32 | "@rollup/plugin-commonjs": "^21.0.0", 33 | "@rollup/plugin-node-resolve": "^13.0.5", 34 | "@storybook/addon-actions": "^6.3.9", 35 | "@storybook/addon-essentials": "^6.3.9", 36 | "@storybook/addon-links": "^6.3.9", 37 | "@storybook/node-logger": "^6.3.9", 38 | "@storybook/preset-create-react-app": "^3.2.0", 39 | "@storybook/react": "^6.3.9", 40 | "@testing-library/jest-dom": "^5.11.4", 41 | "@testing-library/react": "^11.1.0", 42 | "@testing-library/user-event": "^12.1.10", 43 | "@types/jest": "^26.0.15", 44 | "@types/node": "^12.0.0", 45 | "@types/react": "^17.0.0", 46 | "@types/react-dom": "^17.0.0", 47 | "postcss": "^8.3.8", 48 | "prettier": "^2.4.1", 49 | "react": "^17.0.2", 50 | "react-dom": "^17.0.2", 51 | "react-scripts": "4.0.3", 52 | "rollup": "^2.58.0", 53 | "rollup-plugin-peer-deps-external": "^2.2.4", 54 | "rollup-plugin-postcss": "^4.0.1", 55 | "rollup-plugin-typescript2": "^0.30.0", 56 | "tslib": "^2.3.1", 57 | "typescript": "^4.4.3" 58 | }, 59 | "peerDependencies": { 60 | "react": "^16.8.0 | ^17.0.2", 61 | "react-dom": "^16.8.0 | ^17.0.2" 62 | }, 63 | "eslintConfig": { 64 | "extends": [ 65 | "react-app", 66 | "react-app/jest" 67 | ], 68 | "overrides": [ 69 | { 70 | "files": [ 71 | "**/*.stories.*" 72 | ], 73 | "rules": { 74 | "import/no-anonymous-default-export": "off" 75 | } 76 | } 77 | ] 78 | }, 79 | "browserslist": { 80 | "production": [ 81 | ">0.2%", 82 | "not dead", 83 | "not op_mini all" 84 | ], 85 | "development": [ 86 | "last 1 chrome version", 87 | "last 1 firefox version", 88 | "last 1 safari version" 89 | ] 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import commonjs from "@rollup/plugin-commonjs"; 2 | import resolve from "@rollup/plugin-node-resolve"; 3 | import peerDepsExternal from "rollup-plugin-peer-deps-external"; 4 | import typescript from 'rollup-plugin-typescript2'; 5 | import postcss from "rollup-plugin-postcss"; 6 | 7 | import packageJson from "./package.json"; 8 | 9 | // eslint-disable-next-line import/no-anonymous-default-export 10 | export default { 11 | input: "./src/index.ts", 12 | output: [ 13 | { 14 | file: packageJson.main, 15 | format: "cjs", 16 | sourcemap: true 17 | }, 18 | { 19 | file: packageJson.module, 20 | format: "esm", 21 | sourcemap: true 22 | } 23 | ], 24 | plugins: [ 25 | peerDepsExternal(), 26 | resolve(), 27 | commonjs(), 28 | typescript(), 29 | postcss() 30 | ] 31 | }; 32 | -------------------------------------------------------------------------------- /src/ReactSmartScroll/SmartScrollRow/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {memo, RefObject, useLayoutEffect, useState} from 'react'; 2 | import {ReactSmartScrollRow} from '../../types'; 3 | import useComponentHeight from '../hooks/useComponentHeight'; 4 | import {UpdateAction} from '../utils'; 5 | 6 | interface Props { 7 | Component: ReactSmartScrollRow; 8 | data: any; 9 | onUpdate: (event: UpdateAction) => void; 10 | rowHeight: number; 11 | rowIndex: number; 12 | rowProps: any; 13 | rowRef: RefObject; 14 | } 15 | 16 | const SmartScrollRow = (props: Props) => { 17 | const {Component, data, onUpdate, rowHeight, rowIndex, rowProps, rowRef} = 18 | props; 19 | 20 | const [height, setHeight] = useState(rowHeight); 21 | const measuredHeight = useComponentHeight(rowRef); 22 | 23 | useLayoutEffect(() => { 24 | if (measuredHeight && measuredHeight !== height) { 25 | setHeight(measuredHeight); 26 | } 27 | }, [height, measuredHeight]); 28 | 29 | useLayoutEffect(() => { 30 | onUpdate({type: 'update', payload: {height, rowIndex}}); 31 | }, [height, onUpdate, rowIndex]); 32 | 33 | return ( 34 | 41 | ); 42 | }; 43 | 44 | export default memo(SmartScrollRow); 45 | -------------------------------------------------------------------------------- /src/ReactSmartScroll/hooks/useComponentHeight.ts: -------------------------------------------------------------------------------- 1 | import {RefObject, useEffect, useState} from 'react'; 2 | 3 | const useComponentHeight = (ref: RefObject): number => { 4 | const [height, setHeight] = useState(0); 5 | 6 | useEffect(() => { 7 | if (ref) { 8 | const {current} = ref; 9 | if (current) { 10 | const onResize = () => { 11 | setHeight(current.getBoundingClientRect().height); 12 | }; 13 | window.addEventListener('resize', onResize); 14 | setHeight(current.getBoundingClientRect().height); 15 | return () => window.removeEventListener('resize', onResize); 16 | } 17 | } 18 | }, [ref]); 19 | 20 | return height; 21 | }; 22 | 23 | export default useComponentHeight; 24 | -------------------------------------------------------------------------------- /src/ReactSmartScroll/hooks/useScrollTop.ts: -------------------------------------------------------------------------------- 1 | import {RefObject, useLayoutEffect, useState} from 'react'; 2 | 3 | const useScrollTop = (ref: RefObject): number => { 4 | const [scroll, setScroll] = useState(0); 5 | 6 | useLayoutEffect(() => { 7 | const {current} = ref; 8 | if (current) { 9 | const onScroll = () => { 10 | setScroll(current.scrollTop); 11 | }; 12 | current.addEventListener('scroll', onScroll); 13 | return () => current.removeEventListener('scroll', onScroll); 14 | } 15 | }, [ref]); 16 | 17 | return scroll; 18 | }; 19 | 20 | export default useScrollTop; 21 | -------------------------------------------------------------------------------- /src/ReactSmartScroll/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { 2 | createRef, 3 | memo, 4 | RefObject, 5 | useEffect, 6 | useLayoutEffect, 7 | useReducer, 8 | useRef, 9 | useState, 10 | } from 'react'; 11 | import SmartScrollRow from './SmartScrollRow'; 12 | import {calcEndIndex, calcStartIndex, sumRange, UpdateAction} from './utils'; 13 | import useComponentHeight from './hooks/useComponentHeight'; 14 | import useScrollTop from './hooks/useScrollTop'; 15 | import {ReactSmartScrollRow} from '../types'; 16 | 17 | type Props = { 18 | className?: string; 19 | data?: any[]; 20 | overflow?: 'auto' | 'scroll'; 21 | row?: ReactSmartScrollRow; 22 | rowHeight?: number; 23 | startAt?: number; 24 | style?: Record; 25 | } & Record; 26 | 27 | export const ReactSmartScroll = (props: Props) => { 28 | const { 29 | className, 30 | data = [], 31 | overflow = 'auto', 32 | row = () => null, 33 | rowHeight = 100, 34 | startAt = 0, 35 | style, 36 | ...rowProps 37 | } = props; 38 | 39 | const {length} = data; 40 | 41 | const [start, setStart] = useState(0); 42 | const [refs, setRefs] = useState[]>([]); 43 | 44 | const [actualHeights, setActualHeights] = useReducer( 45 | (state: number[], action: UpdateAction) => { 46 | if (action.type === 'update') { 47 | const next = [...state]; 48 | next[action.payload.rowIndex] = action.payload.height; 49 | return next; 50 | } 51 | return Array(data.length).fill(rowHeight); 52 | }, 53 | [] 54 | ); 55 | 56 | useEffect(() => { 57 | setRefs(Array.from({length}).map(() => createRef())); 58 | }, [length]); 59 | 60 | useEffect(() => { 61 | setActualHeights({type: 'reset'}); 62 | }, [length, rowHeight]); 63 | 64 | const [measurements, setMeasurements] = useState({ 65 | startIndex: 0, 66 | endIndex: 0, 67 | paddingBottom: 0, 68 | paddingTop: 0, 69 | }); 70 | 71 | const scrollRef = useRef(null); 72 | const scrollTop = useScrollTop(scrollRef); 73 | const visibleHeight = useComponentHeight(scrollRef); 74 | 75 | // useEffect with this has considerable redraw lag 76 | useLayoutEffect(() => { 77 | if (scrollRef.current && visibleHeight) { 78 | const startIndex = 79 | start !== startAt 80 | ? startAt 81 | : calcStartIndex(actualHeights, scrollTop); 82 | 83 | const endIndex = calcEndIndex( 84 | actualHeights, 85 | visibleHeight, 86 | startIndex 87 | ); 88 | 89 | const last = actualHeights.length - 1; 90 | 91 | const paddingTop = 92 | startIndex > 0 ? sumRange(actualHeights, 0, startIndex - 1) : 0; 93 | const paddingBottom = 94 | endIndex !== last 95 | ? sumRange(actualHeights, endIndex + 1, last) + 17 96 | : 0; 97 | 98 | /*const contentHeight = sumRange( 99 | actualHeights, 100 | 0, 101 | actualHeights.length 102 | );*/ 103 | 104 | setMeasurements({ 105 | startIndex, 106 | endIndex, 107 | paddingBottom, 108 | paddingTop, 109 | }); 110 | 111 | if (start !== startAt) { 112 | scrollRef.current.scrollTop = paddingTop; 113 | setTimeout(() => { 114 | setStart(startAt); 115 | if (data[startAt]) { 116 | const el = refs[startAt].current; 117 | if (el) el.scrollIntoView(); 118 | } 119 | }); 120 | } 121 | } 122 | }, [actualHeights, data, refs, scrollTop, start, startAt, visibleHeight]); 123 | 124 | const {endIndex, paddingBottom, paddingTop, startIndex} = measurements; 125 | 126 | return ( 127 |
132 |
133 | {data.slice(startIndex, endIndex + 1).map((item, i) => ( 134 | 144 | ))} 145 |
146 |
147 | ); 148 | }; 149 | 150 | export default memo(ReactSmartScroll); 151 | -------------------------------------------------------------------------------- /src/ReactSmartScroll/utils.ts: -------------------------------------------------------------------------------- 1 | // these utils are imperative because they are called in useLayoutEffect 2 | // and performance is the priority 3 | export const calcStartIndex = (actualHeights: number[], top = 0) => { 4 | const len = actualHeights.length; 5 | if (top === 0 || len < 2) return 0; 6 | let totalHeight = actualHeights[0]; 7 | for (let i = 1; i < len; i++) { 8 | totalHeight += actualHeights[i]; 9 | if (top <= totalHeight) { 10 | return i - 1; 11 | } 12 | } 13 | return 0; 14 | }; 15 | 16 | export const calcEndIndex = ( 17 | actualHeights: number[], 18 | visibleHeight: number, 19 | startIndex: number 20 | ) => { 21 | const len = actualHeights.length; 22 | if (len < 2) return len; 23 | let totalHeight = -actualHeights[startIndex]; 24 | for (let i = startIndex; i < len - 1; i++) { 25 | totalHeight += actualHeights[i]; 26 | if (totalHeight > visibleHeight + actualHeights[i + 1]) { 27 | return i; 28 | } 29 | } 30 | return len - 1; 31 | }; 32 | 33 | export const sumRange = (array: number[], start: number, end: number) => { 34 | let result = 0; 35 | const e = end + 1; 36 | for (let i = start; i < e; i++) { 37 | result += array[i] || 0; 38 | } 39 | return result; 40 | }; 41 | 42 | export type UpdateAction = 43 | | {type: 'reset'} 44 | | {type: 'update'; payload: {height: number; rowIndex: number}}; 45 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import ReactSmartScroll from './ReactSmartScroll'; 2 | 3 | export default ReactSmartScroll; 4 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import ReactSmartScroll from './ReactSmartScroll'; 2 | export default ReactSmartScroll; 3 | export type {ReactSmartScrollRow} from './types'; 4 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/stories/TestRow/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {ReactSmartScrollRow} from '../../types'; 3 | 4 | const TestRow: ReactSmartScrollRow = ({ 5 | data, 6 | height, 7 | onClick, 8 | rowIndex, 9 | rowRef, 10 | }) => ( 11 |
onClick(rowIndex)}> 12 | [{data.id}]: {height}px 13 |
14 | {data.content} 15 |
16 | ); 17 | 18 | export default TestRow; 19 | -------------------------------------------------------------------------------- /src/stories/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {ReactSmartScroll} from '../ReactSmartScroll'; 3 | import {Story} from '@storybook/react'; 4 | import TestRow from './TestRow'; 5 | import {testData} from './testData'; 6 | 7 | export default { 8 | component: ReactSmartScroll, 9 | title: 'ReactSmartScroll', 10 | parameters: {controls: {hideNoControlsWarning: true}}, 11 | }; 12 | 13 | export const Default: Story = () => { 14 | const [clicked, setClicked] = useState('Click on a row'); 15 | const onClick = (index: number) => { 16 | setClicked(`Clicked on row ${index}`); 17 | }; 18 | return ( 19 |
20 |

React Smart Scroll Demo

21 |
{clicked}
22 | 29 |
30 | ); 31 | }; 32 | -------------------------------------------------------------------------------- /src/stories/testData.ts: -------------------------------------------------------------------------------- 1 | export const testData = [ 2 | { 3 | id: 0, 4 | content: 5 | 'Do deserunt sunt anim enim est est Lorem adipisicing ad commodo sunt minim veniam aliquip. Laboris ut sunt exercitation fugiat consectetur elit anim officia magna veniam quis sit. Elit et est ea enim laborum sit dolore ipsum Lorem minim. Culpa dolor occaecat incididunt minim reprehenderit id aliqua dolor veniam. Aliquip deserunt sint eu cillum sit Lorem reprehenderit incididunt laborum nisi velit mollit occaecat cillum. Dolor culpa eu duis dolore est exercitation nisi nisi ea.', 6 | }, 7 | { 8 | id: 1, 9 | content: 10 | 'Ipsum veniam aute quis irure minim cillum duis deserunt proident quis exercitation. Quis voluptate laboris reprehenderit ea pariatur commodo adipisicing ut laborum pariatur ut elit irure dolore. Laborum magna deserunt dolore incididunt enim cupidatat mollit velit officia cillum nisi velit. Culpa est voluptate id ullamco duis laborum ea ad ullamco eiusmod ea. Eu quis nostrud in nisi. Voluptate ipsum magna sint anim consectetur. Dolor dolor labore labore velit laboris enim.', 11 | }, 12 | { 13 | id: 2, 14 | content: 15 | 'Sunt officia sunt amet ex pariatur cupidatat. Consectetur reprehenderit labore eu aliquip. Esse duis est enim commodo quis minim consectetur est eu. Aliqua labore cupidatat aliqua duis adipisicing consectetur deserunt ipsum ipsum officia. Labore esse proident laboris aliqua consequat anim tempor esse do ex fugiat Lorem. Ad laboris ullamco laboris aute mollit laborum. Lorem ex qui aliqua ipsum minim elit et dolore.', 16 | }, 17 | { 18 | id: 3, 19 | content: 20 | 'Magna labore minim sint mollit sint incididunt non. Et officia commodo et qui duis reprehenderit quis occaecat labore cillum velit. Est dolor magna minim mollit veniam nisi esse proident nostrud. Aute aliquip tempor ea elit deserunt officia do ullamco irure esse Lorem et nulla.', 21 | }, 22 | { 23 | id: 4, 24 | content: 25 | 'Pariatur nostrud ut ullamco minim fugiat reprehenderit culpa commodo Lorem voluptate. Amet occaecat ut nisi excepteur ea sunt veniam minim est aliquip. Do culpa quis laborum adipisicing nisi officia aliquip officia culpa do sit id. Aliquip esse est cupidatat enim nostrud dolor do velit labore incididunt magna fugiat. Nulla incididunt velit occaecat laboris officia velit incididunt enim ipsum cillum laborum exercitation. Et magna dolore nostrud occaecat qui ad laborum amet aliquip.', 26 | }, 27 | { 28 | id: 5, 29 | content: 30 | 'Voluptate aliquip velit anim laboris nulla laboris sint pariatur. Nulla ea in reprehenderit velit veniam occaecat reprehenderit incididunt. Quis fugiat quis anim sit enim nostrud dolore deserunt laboris aliqua officia dolore amet reprehenderit. Ullamco sint adipisicing exercitation esse do id.', 31 | }, 32 | { 33 | id: 6, 34 | content: 35 | 'Nostrud irure do deserunt duis dolore ex. Tempor minim ea esse sit. Dolore mollit anim eiusmod laboris aliqua cupidatat magna consequat deserunt quis consequat ex cupidatat. Elit enim reprehenderit officia dolore reprehenderit.', 36 | }, 37 | { 38 | id: 7, 39 | content: 40 | 'Consequat consectetur ullamco laborum non ullamco ullamco fugiat et consequat qui aliquip enim. Sunt anim voluptate ea sit amet excepteur in. Cillum in esse commodo reprehenderit enim elit cillum est id voluptate ad id anim. Pariatur aute nulla sunt nulla. Esse reprehenderit consequat dolor do quis incididunt.', 41 | }, 42 | { 43 | id: 8, 44 | content: 45 | 'Non laboris velit voluptate fugiat ut enim quis laboris sit exercitation. Lorem ullamco cillum veniam est. Non adipisicing in mollit officia dolore cillum adipisicing laborum et consectetur sit est ad. Irure in ipsum sunt qui consequat ad do sint incididunt. Ut quis fugiat eu non pariatur eiusmod veniam ex mollit ullamco commodo culpa consequat. Officia exercitation eiusmod cupidatat esse esse pariatur eiusmod quis sunt qui velit esse. Dolore ullamco eu ad sit reprehenderit ullamco veniam magna.', 46 | }, 47 | { 48 | id: 9, 49 | content: 50 | 'Ex incididunt nulla nostrud nulla. Aliquip mollit in in dolor dolor veniam aliquip ullamco consequat. Nulla anim minim voluptate magna.', 51 | }, 52 | { 53 | id: 10, 54 | content: 55 | 'Ea id exercitation ullamco aute anim sit. Sint eu eiusmod dolore qui. Cupidatat anim culpa consequat irure cupidatat veniam reprehenderit occaecat.', 56 | }, 57 | { 58 | id: 11, 59 | content: 60 | 'Deserunt proident deserunt laboris irure nostrud eu nostrud qui velit sit amet in. Sint occaecat amet non tempor. Fugiat Lorem reprehenderit qui quis nulla aliquip reprehenderit Lorem voluptate Lorem irure sint exercitation. Dolor occaecat nisi irure proident velit eiusmod.', 61 | }, 62 | { 63 | id: 12, 64 | content: 65 | 'In duis veniam ex mollit laborum enim ad ipsum aliqua aliqua. Officia eiusmod proident enim quis et exercitation consequat ut magna culpa cillum amet irure nulla. Dolor proident aliquip nisi exercitation aute minim duis veniam aute laboris est exercitation consectetur velit. Et in officia non eiusmod aliqua eiusmod. Quis voluptate cillum sunt minim adipisicing nulla mollit labore. Magna sint do incididunt cillum aliquip ad sit ex qui labore est labore. Anim commodo pariatur minim aute labore duis deserunt.', 66 | }, 67 | { 68 | id: 13, 69 | content: 70 | 'Aliqua velit irure quis officia ea aute consectetur. Qui tempor non et velit pariatur in aliquip laborum. Non aute incididunt occaecat quis ut est.', 71 | }, 72 | { 73 | id: 14, 74 | content: 75 | 'Ea enim dolore do voluptate irure aliquip sint aute aliquip. Laboris adipisicing culpa deserunt adipisicing enim ut. Occaecat dolore id amet enim commodo nulla proident elit consequat officia nulla qui. Sint incididunt pariatur minim reprehenderit proident cillum deserunt veniam.', 76 | }, 77 | { 78 | id: 15, 79 | content: 80 | 'Fugiat veniam est labore nostrud in veniam. Voluptate labore est nisi elit do dolor reprehenderit do nulla id est officia. Fugiat est irure officia id minim anim aliqua reprehenderit. Esse ullamco exercitation id est mollit. Deserunt id veniam labore voluptate laboris adipisicing nisi magna laborum et. Duis deserunt qui ex pariatur id qui do duis minim. Consectetur laboris irure aliqua aliquip culpa dolore ea dolor veniam et qui laborum.', 81 | }, 82 | { 83 | id: 16, 84 | content: 85 | 'Eu aute velit sunt officia et reprehenderit in voluptate culpa anim. Sit proident excepteur eu quis occaecat cillum exercitation esse eiusmod cupidatat pariatur cupidatat. Reprehenderit velit incididunt pariatur aute do. Consectetur laboris culpa enim pariatur adipisicing magna amet dolor nisi proident culpa consequat officia elit.', 86 | }, 87 | { 88 | id: 17, 89 | content: 90 | 'Velit non officia nostrud anim. In aliquip ullamco qui voluptate esse commodo labore culpa. Laborum nulla ad aliqua officia nostrud ad aliqua laborum do deserunt velit eu sunt. Pariatur sint sunt ullamco pariatur tempor. Ea quis nisi officia anim ullamco aliqua cupidatat sit esse voluptate aliqua aliqua. Dolor ea excepteur adipisicing amet irure. Culpa ut amet minim ex duis exercitation sunt incididunt consectetur magna eu.', 91 | }, 92 | { 93 | id: 18, 94 | content: 95 | 'Ut tempor cillum qui ad aute ad anim aute ad. Duis eu ex ad adipisicing consequat. Nisi cupidatat ipsum incididunt minim est. Magna duis voluptate qui non in esse exercitation in exercitation minim.', 96 | }, 97 | { 98 | id: 19, 99 | content: 100 | 'Reprehenderit eu consequat elit sit eiusmod labore aute exercitation laborum. Consectetur elit culpa commodo est ea labore esse quis non reprehenderit. Eu dolore commodo consectetur tempor fugiat anim ut irure voluptate sit et. Elit labore dolore reprehenderit tempor deserunt ad adipisicing commodo.', 101 | }, 102 | { 103 | id: 20, 104 | content: 105 | 'Nostrud enim veniam tempor occaecat culpa et reprehenderit. Do culpa quis anim aliquip. Sit laboris excepteur amet nisi sint minim irure nulla sit nisi anim. Dolor elit nulla Lorem id in excepteur do. Nisi nulla culpa amet ipsum reprehenderit consequat tempor exercitation eiusmod officia consequat deserunt occaecat in.', 106 | }, 107 | { 108 | id: 21, 109 | content: 110 | 'Irure minim dolor consequat nisi consectetur in non eu mollit anim reprehenderit excepteur proident ex. Exercitation reprehenderit commodo amet ad. Id laboris non nostrud ullamco sint magna amet elit Lorem velit nisi laborum duis. Labore exercitation enim excepteur aliquip aliquip et minim velit non cupidatat quis anim. Sunt deserunt voluptate exercitation magna dolor Lorem sunt deserunt irure in enim aliquip culpa.', 111 | }, 112 | { 113 | id: 22, 114 | content: 115 | 'Nulla cupidatat deserunt et magna quis. Ut aliquip fugiat est et nostrud esse nisi velit consectetur laboris exercitation aliqua anim est. Ad incididunt ad excepteur deserunt. Duis eiusmod quis non reprehenderit quis fugiat deserunt do Lorem reprehenderit consectetur ex. Ea adipisicing veniam magna qui nulla velit in occaecat. Aliquip laborum consequat consectetur laboris nostrud consectetur commodo veniam qui incididunt amet aliqua labore.', 116 | }, 117 | { 118 | id: 23, 119 | content: 120 | 'Aliqua sunt nisi sunt velit magna esse esse. Elit cillum enim deserunt aliquip ut esse occaecat anim excepteur. Reprehenderit minim esse culpa quis exercitation do.', 121 | }, 122 | { 123 | id: 24, 124 | content: 125 | 'Officia elit id anim nisi ea et. Eiusmod eu excepteur Lorem occaecat non exercitation occaecat non veniam ipsum aliqua adipisicing. Enim est cillum officia et. Ea quis eiusmod tempor labore voluptate elit. Occaecat qui consectetur in nisi consequat ut labore adipisicing elit mollit ad.', 126 | }, 127 | { 128 | id: 25, 129 | content: 130 | 'Cupidatat labore sint fugiat nulla magna cillum nulla dolore Lorem ad enim commodo quis. Ipsum minim fugiat sint amet duis ipsum minim occaecat ea aliquip excepteur incididunt in et. Consectetur velit ad aute consectetur. Ea est sint excepteur nulla enim mollit sit minim voluptate aliqua laboris adipisicing ad laborum. Velit commodo labore laborum eu. Ipsum do pariatur ad nulla. Aute ea excepteur nulla nisi velit adipisicing Lorem.', 131 | }, 132 | { 133 | id: 26, 134 | content: 135 | 'Eiusmod consequat duis non commodo Lorem aliqua dolore mollit velit est sit ullamco aliquip. Et tempor eiusmod adipisicing voluptate ea. Excepteur ad est nisi reprehenderit. Adipisicing pariatur culpa commodo officia nostrud officia mollit voluptate magna exercitation ut officia reprehenderit ex.', 136 | }, 137 | { 138 | id: 27, 139 | content: 140 | 'Nostrud irure enim ad cupidatat est pariatur ut aliqua dolor voluptate in enim. Magna dolore reprehenderit Lorem ad sit fugiat incididunt labore amet mollit laboris pariatur deserunt. Amet anim in dolor id aute eu aute.', 141 | }, 142 | { 143 | id: 28, 144 | content: 145 | 'Eu nulla eu consectetur esse eiusmod reprehenderit ipsum ipsum esse cillum. Consectetur amet aliquip adipisicing dolor nulla qui irure. Pariatur ex eu qui dolor pariatur sunt velit deserunt do cupidatat.', 146 | }, 147 | { 148 | id: 29, 149 | content: 150 | 'Irure veniam eu nostrud mollit exercitation deserunt excepteur. Do enim do culpa consequat ullamco proident qui ex et excepteur ea duis. Sunt officia dolor aute laboris aliquip quis ullamco adipisicing incididunt ullamco excepteur est aliqua. Velit proident non sunt cillum nulla fugiat irure nostrud pariatur culpa consectetur labore reprehenderit est. Proident veniam consequat qui sit. Ex dolor voluptate reprehenderit aliqua qui enim velit ipsum nulla commodo consequat eiusmod esse. Irure qui laborum ex elit culpa anim sint incididunt deserunt ut officia.', 151 | }, 152 | { 153 | id: 30, 154 | content: 155 | 'Proident aute ad mollit voluptate cupidatat veniam sint. Cupidatat elit et quis Lorem minim minim. Enim nostrud pariatur culpa tempor.', 156 | }, 157 | { 158 | id: 31, 159 | content: 160 | 'Aliquip ut pariatur mollit pariatur incididunt qui ea excepteur magna nisi nostrud sint. Fugiat officia aliquip esse sunt nostrud eiusmod. Aute ea minim culpa minim aliqua et eu. Culpa esse aute nulla mollit nostrud dolore. Dolor reprehenderit sint fugiat consequat ipsum ea incididunt.', 161 | }, 162 | { 163 | id: 32, 164 | content: 165 | 'Mollit tempor incididunt et magna enim cillum proident proident duis reprehenderit cillum. Reprehenderit occaecat laborum cupidatat mollit dolor non fugiat fugiat eiusmod officia cupidatat incididunt. Do sunt adipisicing ea do officia. Culpa consectetur laborum eu veniam ad pariatur velit tempor officia dolore tempor id. Proident qui nostrud Lorem minim voluptate incididunt ullamco aute enim eu exercitation enim adipisicing esse.', 166 | }, 167 | { 168 | id: 33, 169 | content: 170 | 'Nisi dolore in anim esse consequat velit eu ipsum officia. Eu proident commodo dolore id Lorem ex ut sit sit veniam laborum enim. Culpa eiusmod tempor velit aute et commodo minim culpa consectetur aliquip nisi. Cupidatat ullamco laborum anim tempor ipsum id laboris amet incididunt laborum et nostrud.', 171 | }, 172 | { 173 | id: 34, 174 | content: 175 | 'Consectetur qui ut esse enim nulla reprehenderit consequat deserunt ullamco sit ex minim duis. Tempor ad amet commodo fugiat in. In reprehenderit dolore sint dolore fugiat eiusmod pariatur incididunt exercitation laborum non amet Lorem tempor. Minim aute aute Lorem consequat proident fugiat tempor irure cillum id ex eiusmod cillum non. Pariatur dolore esse sit velit non. Do occaecat excepteur mollit cupidatat dolore. Anim dolor officia incididunt nulla sint consequat sit pariatur.', 176 | }, 177 | { 178 | id: 35, 179 | content: 180 | 'Cillum nisi amet qui excepteur. Exercitation minim irure in sunt cupidatat eu magna. Sint est anim excepteur quis laboris laborum eiusmod cillum fugiat occaecat ea commodo esse aliqua. Ut reprehenderit velit sit et consectetur quis reprehenderit consequat Lorem culpa exercitation magna culpa. Aliquip eiusmod proident laborum aute excepteur. Excepteur in nisi duis pariatur ex qui.', 181 | }, 182 | { 183 | id: 36, 184 | content: 185 | 'Velit nulla amet labore ullamco do esse. Ea deserunt in labore proident nulla non commodo quis irure proident elit. Duis consectetur reprehenderit irure consequat. Qui reprehenderit adipisicing Lorem aliquip est id. Sit sunt cillum duis non esse do do occaecat est non. Dolor reprehenderit dolore reprehenderit pariatur consequat dolore cillum aute tempor sunt officia mollit amet ea.', 186 | }, 187 | { 188 | id: 37, 189 | content: 190 | 'Et duis tempor magna tempor et ea. Commodo id ex esse culpa ea labore occaecat irure nulla anim cupidatat commodo anim nostrud. Proident consequat est enim est aliqua labore ullamco tempor ullamco irure sint qui. Mollit minim dolor incididunt ex reprehenderit voluptate ullamco. Exercitation voluptate excepteur sit ullamco. Esse excepteur laborum nisi excepteur fugiat in tempor sint eiusmod deserunt reprehenderit sint quis. Fugiat ea sunt reprehenderit nulla laborum excepteur exercitation aliquip minim commodo occaecat minim duis esse.', 191 | }, 192 | { 193 | id: 38, 194 | content: 195 | 'Nostrud irure cupidatat deserunt elit labore id ea nisi id dolor. Aute aliqua adipisicing do eiusmod quis velit ullamco. Nostrud in exercitation do consequat. Esse ipsum anim id exercitation anim do eu ex ipsum irure.', 196 | }, 197 | { 198 | id: 39, 199 | content: 200 | 'Nisi sint velit velit ex minim ipsum. Ut commodo laboris commodo cupidatat pariatur aute cillum. Excepteur commodo dolor veniam non culpa ea qui reprehenderit nisi et ad. Deserunt esse dolore do officia proident consectetur esse eiusmod excepteur esse tempor. Eu occaecat duis duis ullamco ut veniam. Adipisicing et elit velit tempor qui esse mollit sunt adipisicing enim tempor fugiat est tempor. Excepteur quis mollit minim aute amet qui pariatur veniam ipsum non voluptate occaecat.', 201 | }, 202 | { 203 | id: 40, 204 | content: 205 | 'Officia veniam dolore pariatur aliqua. Ex incididunt excepteur non esse excepteur irure enim ex consequat pariatur cillum officia. Esse Lorem esse sunt ullamco sit sunt exercitation commodo sit.', 206 | }, 207 | { 208 | id: 41, 209 | content: 210 | 'Ad sit ea cupidatat eiusmod excepteur pariatur sint proident voluptate ut. Elit quis ea fugiat qui tempor ad. Nulla sint veniam officia et laborum sint velit aute consequat ea veniam cillum. Aliqua nulla do aliqua ad nulla velit incididunt non do reprehenderit eu culpa id aute. Irure minim fugiat veniam deserunt occaecat irure. Ullamco aliqua culpa labore qui consectetur veniam. Excepteur excepteur cupidatat officia pariatur.', 211 | }, 212 | { 213 | id: 42, 214 | content: 215 | 'Proident culpa sint aute voluptate culpa pariatur Lorem aute commodo pariatur ad occaecat fugiat dolore. Nostrud ipsum pariatur elit ea. Proident excepteur fugiat qui tempor elit esse ullamco cupidatat proident sunt. Nisi elit cupidatat dolore ut adipisicing nulla sint eiusmod cillum enim. Sit sunt reprehenderit sit non aliquip incididunt dolore ea nulla Lorem proident dolore pariatur. Nisi ad sunt fugiat nulla voluptate anim amet nulla. Excepteur occaecat laborum cillum consequat minim nulla cillum labore elit consectetur aute anim.', 216 | }, 217 | { 218 | id: 43, 219 | content: 220 | 'Esse nisi nisi id ex sint. Enim eiusmod cillum laborum voluptate commodo voluptate enim reprehenderit. Et dolore officia Lorem sunt pariatur ullamco excepteur commodo nisi ut.', 221 | }, 222 | { 223 | id: 44, 224 | content: 225 | 'Ad occaecat tempor dolor cupidatat est consequat adipisicing enim mollit exercitation anim non mollit. Veniam exercitation aliqua anim occaecat ipsum in irure eu sit quis. Tempor amet nisi nostrud laboris tempor. Labore velit labore Lorem non sunt. Qui ullamco laborum enim velit ex excepteur incididunt elit exercitation nostrud ex voluptate excepteur.', 226 | }, 227 | { 228 | id: 45, 229 | content: 230 | 'Do irure exercitation aliquip minim tempor veniam duis dolor quis. Velit anim anim sit dolore. Ex officia qui ex ad dolor anim laborum duis enim. Mollit id adipisicing eiusmod et proident mollit labore cupidatat cupidatat Lorem aute. Lorem aliquip elit nisi amet qui minim nostrud do esse culpa culpa eu sit.', 231 | }, 232 | { 233 | id: 46, 234 | content: 235 | 'Dolor commodo aute in esse. Quis adipisicing nostrud esse aliquip velit sunt eiusmod culpa et. Sint do proident culpa cillum voluptate est. Cillum consectetur dolore exercitation fugiat Lorem incididunt amet anim nostrud sunt nisi amet. Magna aliquip eu aliqua deserunt proident laboris minim nisi sunt irure duis nisi irure. Ea reprehenderit et ipsum ipsum anim non cillum irure tempor qui voluptate. Eiusmod quis ipsum est ipsum cupidatat nisi in fugiat dolor deserunt et.', 236 | }, 237 | { 238 | id: 47, 239 | content: 240 | 'Sint sunt ullamco ea laboris ipsum mollit quis consequat. Fugiat aute sit ad duis reprehenderit in cillum deserunt deserunt aliquip velit non amet. Voluptate et incididunt ex ipsum elit labore laboris.', 241 | }, 242 | { 243 | id: 48, 244 | content: 245 | 'Ut commodo magna duis nisi veniam officia culpa velit est commodo. Fugiat laboris ullamco aliqua eiusmod id in ipsum aliqua ex. Deserunt consectetur labore officia nisi sit. Veniam dolore reprehenderit enim laborum incididunt duis excepteur laborum aliqua. Incididunt non laborum ut magna proident consequat consectetur enim anim velit tempor reprehenderit.', 246 | }, 247 | { 248 | id: 49, 249 | content: 250 | 'Labore esse non non do pariatur sit reprehenderit eiusmod velit elit sunt ad proident. Tempor nulla eiusmod in sint nulla laborum. Minim laborum velit adipisicing sint ullamco nostrud. Lorem cupidatat eu sit deserunt. Amet ex ut non Lorem ex reprehenderit ullamco in cupidatat cillum irure. Anim ut nulla ex aliqua exercitation adipisicing aliqua ad qui sit sunt irure cupidatat.', 251 | }, 252 | { 253 | id: 50, 254 | content: 255 | 'Ut qui nisi consectetur culpa officia eu fugiat in labore. Qui fugiat do qui ut. Officia sint tempor cillum nisi id ea incididunt. Fugiat exercitation aute irure elit sit id ex non anim fugiat qui sint qui. Ullamco veniam id proident fugiat laboris velit. Tempor dolore mollit labore dolor laboris dolore consectetur.', 256 | }, 257 | { 258 | id: 51, 259 | content: 260 | 'Cupidatat consectetur excepteur occaecat fugiat tempor eu incididunt occaecat. Ullamco velit anim do excepteur aliqua ut Lorem. Officia incididunt Lorem sint veniam ad proident tempor sit proident minim excepteur dolore deserunt.', 261 | }, 262 | { 263 | id: 52, 264 | content: 265 | 'Id mollit tempor exercitation excepteur exercitation esse. Occaecat nostrud occaecat irure consequat ex tempor enim eiusmod ut reprehenderit fugiat consequat. Minim sunt commodo cillum eu aliquip.', 266 | }, 267 | { 268 | id: 53, 269 | content: 270 | 'Nulla Lorem dolor anim tempor et mollit minim culpa esse eiusmod exercitation eu eu nulla. Voluptate amet eu in non aliqua nostrud nulla incididunt sit nulla esse ipsum. Et cillum in enim reprehenderit amet anim ad. Dolore ipsum aute aute magna dolore excepteur ea elit aliqua ullamco.', 271 | }, 272 | { 273 | id: 54, 274 | content: 275 | 'Ullamco duis consequat aliquip commodo anim fugiat commodo eiusmod sint sunt excepteur occaecat duis. Deserunt ipsum nulla fugiat exercitation magna ad incididunt do eiusmod mollit nisi deserunt. Irure dolor dolore in velit officia.', 276 | }, 277 | { 278 | id: 55, 279 | content: 280 | 'Velit labore quis sunt duis sint mollit. Fugiat ut ut ad magna minim nulla tempor magna laboris nostrud cillum aliqua magna. Non deserunt ipsum excepteur sint in. Ullamco aliquip dolor nulla reprehenderit ex elit ea. Id ullamco ipsum ad Lorem velit.', 281 | }, 282 | { 283 | id: 56, 284 | content: 285 | 'Elit incididunt anim anim Lorem sit mollit mollit laboris ullamco sit tempor. Eiusmod Lorem ea consectetur excepteur officia ullamco id laborum ad. Eu voluptate ullamco occaecat excepteur et eiusmod. Veniam laborum aliquip duis ullamco laboris. Excepteur est cillum ullamco eu laborum ex elit ipsum adipisicing id velit.', 286 | }, 287 | { 288 | id: 57, 289 | content: 290 | 'Laboris consequat in commodo laborum sit do et pariatur id irure dolor. Reprehenderit ullamco nulla laboris velit cupidatat fugiat occaecat voluptate mollit reprehenderit. Tempor aute laboris officia id excepteur velit do. Irure sint Lorem dolor non aliqua aliqua aliqua ad dolor laborum. Incididunt magna laborum incididunt anim non mollit exercitation fugiat in est. Irure in fugiat sint veniam. Adipisicing adipisicing duis anim exercitation irure laborum anim excepteur incididunt ullamco ad excepteur adipisicing consequat.', 291 | }, 292 | { 293 | id: 58, 294 | content: 295 | 'Officia in aliquip non reprehenderit consequat sunt aliqua deserunt duis commodo. Sunt aliquip tempor sunt mollit cillum quis et proident. Veniam voluptate sunt deserunt deserunt officia. Aliqua duis duis ea mollit.', 296 | }, 297 | { 298 | id: 59, 299 | content: 300 | 'Sint aute nisi adipisicing sint irure eiusmod irure occaecat dolore anim. Lorem consectetur laborum commodo voluptate cupidatat consequat ullamco eiusmod velit non commodo non incididunt deserunt. Ex reprehenderit tempor commodo sint ipsum sint voluptate ipsum. Elit aliqua non fugiat labore mollit ex. Veniam quis pariatur magna cillum commodo reprehenderit elit proident magna ipsum nulla. Sint magna ipsum incididunt esse non.', 301 | }, 302 | { 303 | id: 60, 304 | content: 305 | 'Tempor exercitation non do tempor ex quis excepteur deserunt exercitation dolor. Fugiat duis Lorem nisi nisi laboris labore nostrud deserunt excepteur. Dolore reprehenderit deserunt proident minim. Duis culpa proident laborum ex reprehenderit irure esse dolor enim. Sit commodo nostrud eu elit dolor aliquip laboris fugiat irure enim. Occaecat quis nostrud id et in commodo velit irure consectetur incididunt reprehenderit cillum enim officia.', 306 | }, 307 | { 308 | id: 61, 309 | content: 310 | 'Voluptate velit et aliquip id ad non quis. Enim enim id enim nostrud nostrud nisi aliqua ad id elit consequat. Ad officia ex laborum laboris enim irure labore ea elit do ipsum commodo sint.', 311 | }, 312 | { 313 | id: 62, 314 | content: 315 | 'Occaecat ipsum anim sunt eiusmod dolor esse pariatur ad do ipsum commodo do. Proident cupidatat exercitation tempor sit. Excepteur labore nulla sint consequat fugiat veniam do velit esse. Eu incididunt ipsum magna sit aliqua eiusmod. Laborum commodo quis nisi et irure duis in sint. Anim est excepteur ipsum aute irure proident proident aliqua sit laboris. Minim id ullamco incididunt eiusmod mollit minim mollit cupidatat.', 316 | }, 317 | { 318 | id: 63, 319 | content: 320 | 'Fugiat ut tempor fugiat enim deserunt sint mollit veniam culpa officia. Proident consectetur proident cillum est labore esse adipisicing ut excepteur. Nostrud aliquip do reprehenderit occaecat mollit proident exercitation mollit ea magna veniam. Incididunt est non labore non consequat velit. Laboris commodo non deserunt minim deserunt pariatur consectetur aliqua ullamco officia aliquip do.', 321 | }, 322 | { 323 | id: 64, 324 | content: 325 | 'Laboris proident ex esse anim. Cupidatat anim reprehenderit proident adipisicing officia. Dolore aute est consequat duis nulla mollit culpa amet mollit exercitation. Exercitation proident non fugiat officia commodo nostrud ut fugiat commodo exercitation. Tempor excepteur cupidatat reprehenderit consectetur aliquip cupidatat eu. Ad non aliqua mollit anim reprehenderit esse laborum id.', 326 | }, 327 | { 328 | id: 65, 329 | content: 330 | 'Consequat cillum aliquip dolor nulla laborum non cupidatat cupidatat non voluptate adipisicing consequat et exercitation. Ipsum aliqua eu minim est est et. Occaecat eu elit laborum enim culpa ut. Amet velit est consequat magna sit officia excepteur veniam cillum.', 331 | }, 332 | { 333 | id: 66, 334 | content: 335 | 'Excepteur magna dolor quis id nulla officia consequat do ex mollit velit. Fugiat irure duis occaecat eiusmod Lorem duis in consequat proident ipsum consequat elit ut. Lorem adipisicing aute labore ad quis. Nisi id reprehenderit aliquip consectetur pariatur. Excepteur sunt proident enim officia. Incididunt et quis culpa tempor commodo sit ad excepteur aliquip officia ut. Aliquip cillum commodo ut culpa deserunt dolor officia nostrud deserunt officia.', 336 | }, 337 | { 338 | id: 67, 339 | content: 340 | 'Ipsum excepteur ad irure fugiat duis consectetur excepteur ullamco. Magna minim nulla sit do adipisicing ea adipisicing eiusmod amet cupidatat dolore consectetur tempor. In pariatur et in laborum tempor veniam.', 341 | }, 342 | { 343 | id: 68, 344 | content: 345 | 'Ea fugiat reprehenderit nulla veniam ut velit Lorem ex anim irure amet velit. Occaecat commodo sunt consequat tempor elit proident enim laboris magna do. Ullamco ipsum ea officia exercitation in do. Ex laborum consectetur do eu veniam ullamco reprehenderit elit. Aliquip laborum tempor cupidatat in. Sint in excepteur duis ad duis ipsum ullamco do.', 346 | }, 347 | { 348 | id: 69, 349 | content: 350 | 'Enim elit sunt commodo exercitation. Est ipsum consectetur cillum reprehenderit esse proident cillum cupidatat pariatur. Adipisicing mollit minim tempor proident ullamco nisi ex sit laborum consequat aute eiusmod aute.', 351 | }, 352 | { 353 | id: 70, 354 | content: 355 | 'Labore pariatur qui laboris cillum aliqua pariatur cupidatat consectetur id nisi sint ad. Magna officia et ipsum nostrud eiusmod ut occaecat et. Cillum mollit irure aliqua ipsum velit sint labore esse cupidatat esse labore aute laborum anim. Elit quis do dolor officia. Esse aliquip nulla veniam nostrud fugiat do labore consequat tempor elit laborum officia labore. Excepteur ipsum adipisicing ipsum officia ut adipisicing est ad exercitation sit tempor reprehenderit non. Esse do commodo laboris amet amet eiusmod ad.', 356 | }, 357 | { 358 | id: 71, 359 | content: 360 | 'Mollit in anim culpa laborum. Do elit non duis nisi ex cillum laboris id fugiat velit eiusmod esse. Ullamco amet occaecat in laboris Lorem. Id reprehenderit tempor culpa non adipisicing adipisicing velit irure. Esse commodo dolore cupidatat sunt commodo ipsum duis. Reprehenderit labore exercitation tempor id proident nostrud aliqua veniam. Laborum cillum culpa laboris id enim do est ad tempor ut et deserunt ipsum.', 361 | }, 362 | { 363 | id: 72, 364 | content: 365 | 'Tempor laborum voluptate proident fugiat enim nostrud deserunt mollit cillum culpa. Ea irure sunt et ut. Adipisicing deserunt consequat esse consectetur ad anim ipsum excepteur dolor cillum proident anim. Esse exercitation qui excepteur sit laboris ea qui ex eiusmod. Ipsum id Lorem ea in ullamco officia do dolor dolore. Cupidatat labore minim non nostrud magna excepteur fugiat non aute.', 366 | }, 367 | { 368 | id: 73, 369 | content: 370 | 'Magna irure ad enim dolor elit dolore quis exercitation amet Lorem id cupidatat fugiat. Incididunt aliqua fugiat sunt ipsum elit ullamco velit ipsum. Non laboris reprehenderit eu laboris. Qui quis irure tempor consectetur exercitation aliqua laboris culpa ullamco adipisicing. Culpa nostrud reprehenderit irure eiusmod ipsum nisi non et excepteur velit nostrud in.', 371 | }, 372 | { 373 | id: 74, 374 | content: 375 | 'Culpa voluptate consectetur veniam officia cillum do enim excepteur occaecat deserunt consequat sunt esse esse. Ullamco id tempor ullamco incididunt nostrud occaecat exercitation elit esse voluptate commodo occaecat. Et cupidatat aliquip duis adipisicing commodo adipisicing eiusmod ad quis nisi duis. Ullamco eiusmod exercitation nulla sunt adipisicing dolore officia ea ea nulla ullamco nostrud.', 376 | }, 377 | { 378 | id: 75, 379 | content: 380 | 'Exercitation eiusmod velit quis nostrud. Eiusmod cupidatat consequat non ea aliqua deserunt quis deserunt pariatur. Exercitation dolor est fugiat non dolore ea. Officia in ea incididunt officia veniam pariatur officia dolore proident mollit anim voluptate consequat Lorem. Reprehenderit consectetur labore proident dolore occaecat nulla consequat officia.', 381 | }, 382 | { 383 | id: 76, 384 | content: 385 | 'Enim qui do Lorem incididunt nostrud amet enim. Nisi enim voluptate occaecat commodo elit aliqua laboris commodo tempor consectetur qui cupidatat. Reprehenderit excepteur deserunt minim sit est pariatur. Aute amet aliqua deserunt ipsum ipsum. Excepteur excepteur mollit sunt dolore commodo sint amet dolor proident velit occaecat ipsum non. Lorem mollit sit quis cillum consectetur do voluptate elit reprehenderit. Et consequat proident nostrud amet laboris ad excepteur aliquip fugiat amet fugiat tempor.', 386 | }, 387 | { 388 | id: 77, 389 | content: 390 | 'Deserunt ullamco tempor ut tempor ut et. Est deserunt et esse ullamco proident deserunt duis ut occaecat aliquip esse proident. Cillum nulla labore nulla ipsum amet. Cupidatat veniam amet incididunt laboris voluptate magna nostrud. Aute sint non laboris do culpa pariatur ullamco dolor reprehenderit aliquip non sit Lorem incididunt.', 391 | }, 392 | { 393 | id: 78, 394 | content: 395 | 'Tempor aute duis deserunt amet qui pariatur exercitation proident amet laborum aute sit ut adipisicing. Dolore ipsum velit nulla eiusmod deserunt velit pariatur adipisicing non ea. Veniam nisi minim proident in dolore irure occaecat cupidatat culpa cillum commodo nisi incididunt. Cupidatat tempor laborum ad non amet aute magna nisi aliqua consequat. Anim cillum ad proident sit voluptate. Commodo occaecat mollit anim enim aute deserunt enim amet reprehenderit aute anim.', 396 | }, 397 | { 398 | id: 79, 399 | content: 400 | 'Lorem velit elit aliqua adipisicing ullamco. Mollit exercitation velit exercitation anim do nulla ut ad consequat et adipisicing minim laborum veniam. Velit veniam ut nisi minim. Sunt nostrud cupidatat anim adipisicing duis duis. Cupidatat fugiat ex est ea in ut ex amet ut elit commodo ipsum exercitation occaecat.', 401 | }, 402 | { 403 | id: 80, 404 | content: 405 | 'Do in qui sunt et anim ad qui irure eu labore in adipisicing incididunt. Cupidatat excepteur nostrud amet incididunt irure ut sit ad commodo ullamco ullamco sint. Aliqua ad velit cupidatat non ipsum labore dolore non est esse reprehenderit adipisicing. Consequat aliqua elit ullamco eu non. Pariatur est mollit nisi amet nisi velit sint minim qui excepteur in excepteur aliqua aliquip.', 406 | }, 407 | { 408 | id: 81, 409 | content: 410 | 'Qui sit ipsum proident esse incididunt laboris nisi veniam qui tempor id. Excepteur tempor voluptate sit reprehenderit sit aliquip fugiat amet proident. Irure incididunt minim enim occaecat amet ea amet est ut sit ipsum enim. Et excepteur ut elit nisi labore ex eiusmod enim ex sit. Veniam ullamco irure commodo tempor fugiat aliquip amet eu sunt ex adipisicing nulla labore aute. Dolor excepteur sint irure excepteur labore.', 411 | }, 412 | { 413 | id: 82, 414 | content: 415 | 'Dolor reprehenderit culpa Lorem et ea id nostrud irure. Exercitation laboris amet laborum occaecat sint tempor proident eiusmod enim culpa ut culpa. Voluptate eiusmod ea consectetur aliqua cupidatat consequat anim eiusmod sunt minim mollit Lorem. Id quis irure consequat dolor nulla nisi nisi sit sint magna. Fugiat aliqua nulla sit eu.', 416 | }, 417 | { 418 | id: 83, 419 | content: 420 | 'Reprehenderit proident dolore sunt eiusmod mollit occaecat mollit deserunt tempor adipisicing adipisicing nostrud minim laborum. Non veniam consectetur laboris fugiat duis elit aliqua amet. Deserunt pariatur deserunt laboris non id in elit et. Consectetur sit labore nulla cillum sint. Est nisi mollit incididunt eiusmod fugiat fugiat cupidatat adipisicing. Aliquip incididunt aute enim anim pariatur proident cillum pariatur aliqua cillum cupidatat nisi dolore do. Est do voluptate nulla ipsum ea sit ipsum dolor commodo Lorem minim ipsum.', 421 | }, 422 | { 423 | id: 84, 424 | content: 425 | 'Duis dolor ex excepteur laborum veniam excepteur non Lorem veniam commodo sunt ex enim duis. Et cupidatat exercitation duis sunt reprehenderit sunt excepteur do amet. Incididunt exercitation do duis excepteur ad aute labore nisi minim id. Mollit anim elit aliqua nisi sint dolore aliqua aute dolore Lorem ad magna in do.', 426 | }, 427 | { 428 | id: 85, 429 | content: 430 | 'Amet irure cillum id occaecat consequat mollit fugiat laboris. Aliquip deserunt irure enim Lorem minim consequat nulla cillum ut ad. Velit ea ex et amet ea voluptate dolor duis eiusmod. Proident exercitation reprehenderit laboris occaecat et mollit eiusmod cillum amet enim cillum dolore adipisicing exercitation. Enim laborum irure duis sunt qui velit proident esse quis exercitation mollit esse et. Nulla Lorem pariatur consectetur dolor duis voluptate.', 431 | }, 432 | { 433 | id: 86, 434 | content: 435 | 'Cillum incididunt minim deserunt magna. Elit dolore voluptate consectetur laborum officia voluptate et do qui in est dolor aliquip non. Aliqua eu mollit do amet tempor velit ex dolor ad quis. Nostrud minim eiusmod ex occaecat culpa. Ut laboris ipsum aute duis cupidatat ad nisi elit et minim laborum. Pariatur labore ea commodo amet aute est ut. Voluptate nisi adipisicing amet esse irure minim.', 436 | }, 437 | { 438 | id: 87, 439 | content: 440 | 'Proident mollit ipsum sit ullamco ullamco do cupidatat anim consequat eu. Esse ad velit nisi cillum. Incididunt incididunt duis ex dolor adipisicing veniam. Culpa nostrud qui consectetur nostrud est aliqua mollit reprehenderit commodo velit. Id sint officia cillum est anim tempor veniam consectetur dolore id sunt excepteur esse.', 441 | }, 442 | { 443 | id: 88, 444 | content: 445 | 'Amet proident laboris magna ullamco dolore nostrud proident cupidatat fugiat non duis officia aliquip. Exercitation aute fugiat est aliquip nisi id cillum exercitation proident nostrud. Velit culpa laboris nostrud ad laboris tempor ut adipisicing ea mollit incididunt. Pariatur nulla est elit amet in do laboris. Nisi reprehenderit sit minim eu nulla. Magna incididunt veniam Lorem labore eiusmod nisi adipisicing est esse enim ipsum ex eiusmod proident.', 446 | }, 447 | { 448 | id: 89, 449 | content: 450 | 'Quis voluptate ut non nulla esse sit excepteur non amet. Culpa commodo enim sunt non qui nulla reprehenderit reprehenderit. Duis nisi sit dolore officia aute labore cillum eu minim deserunt id tempor.', 451 | }, 452 | { 453 | id: 90, 454 | content: 455 | 'Veniam ad est aute magna minim enim in qui amet cupidatat. Quis ea in do aute enim sunt reprehenderit amet cupidatat sit do incididunt ullamco. Consectetur elit sit aute do reprehenderit qui dolore dolor voluptate cupidatat elit Lorem. Adipisicing qui qui dolore ut est sint. Aute aliquip aliqua laboris minim anim amet cupidatat in non esse incididunt. Non magna nulla ad do Lorem.', 456 | }, 457 | { 458 | id: 91, 459 | content: 460 | 'Pariatur duis amet ullamco adipisicing ea nostrud. Aute laborum deserunt veniam anim reprehenderit consectetur occaecat veniam reprehenderit. Ea cillum laboris amet ea aliquip commodo Lorem et duis do. Culpa velit officia consectetur velit dolore proident tempor proident sint cupidatat magna magna occaecat nulla. Ex eu labore commodo veniam ullamco exercitation ullamco. Quis aliquip eu deserunt pariatur deserunt elit.', 461 | }, 462 | { 463 | id: 92, 464 | content: 465 | 'Exercitation aliquip ex nostrud anim velit aute exercitation aliquip mollit. Dolor ullamco ipsum magna Lorem laborum. Tempor laboris eu anim consequat aliquip nulla Lorem quis. Anim ad ut enim velit reprehenderit est do ea Lorem ut culpa sint aute aute. Reprehenderit magna elit pariatur officia pariatur aliquip aliqua culpa enim duis Lorem qui excepteur ut. Esse consequat ullamco officia aute eu.', 466 | }, 467 | { 468 | id: 93, 469 | content: 470 | 'Consectetur incididunt aliqua sit nulla laborum ad. Aliqua in laborum qui do. Ut aliquip fugiat ex aliqua. Fugiat culpa exercitation amet ad do non labore ex ullamco laborum mollit reprehenderit aute duis.', 471 | }, 472 | { 473 | id: 94, 474 | content: 475 | 'Incididunt fugiat proident occaecat velit est id Lorem. Officia eiusmod esse ullamco enim voluptate qui enim eiusmod officia laboris id. Ea veniam laborum deserunt pariatur eu quis ad culpa incididunt do Lorem. Ad proident magna consequat veniam eu. Incididunt ullamco ex excepteur mollit velit pariatur exercitation. Irure excepteur elit excepteur esse commodo sit velit in commodo adipisicing amet non voluptate in. Exercitation enim cillum adipisicing reprehenderit proident pariatur occaecat tempor ad exercitation occaecat dolor est voluptate.', 476 | }, 477 | { 478 | id: 95, 479 | content: 480 | 'Irure cupidatat labore proident nostrud excepteur aute sit. Commodo aliqua adipisicing consectetur excepteur laborum minim id velit irure fugiat culpa. Proident voluptate fugiat dolore nisi laboris. Ullamco sunt aliqua et enim aliqua commodo id pariatur. Nostrud ad excepteur culpa duis commodo incididunt in. Labore incididunt irure enim Lorem Lorem.', 481 | }, 482 | { 483 | id: 96, 484 | content: 485 | 'Quis nostrud aute reprehenderit eiusmod culpa sunt ad ea incididunt. Ad adipisicing ipsum culpa proident. Laborum sit excepteur quis commodo exercitation nulla dolor excepteur aliquip mollit enim. Aliquip tempor nostrud enim aute sint culpa sunt. Proident est occaecat nulla mollit laboris quis.', 486 | }, 487 | { 488 | id: 97, 489 | content: 490 | 'Enim nulla et est exercitation laborum duis excepteur aute cupidatat aliquip ex velit. Aute adipisicing amet reprehenderit anim qui magna fugiat qui fugiat deserunt ea incididunt. Anim dolore consectetur velit sint. Ex ullamco occaecat dolor pariatur consectetur veniam aute esse. Ea do nisi id excepteur. Ipsum voluptate minim enim quis mollit amet esse deserunt ad.', 491 | }, 492 | { 493 | id: 98, 494 | content: 495 | 'Incididunt ut eiusmod aliqua exercitation dolore veniam non duis consectetur id ipsum. Laborum reprehenderit qui ad aliqua eiusmod est. Id deserunt incididunt ex sunt officia aute mollit qui eu. Esse pariatur labore amet enim laboris.', 496 | }, 497 | { 498 | id: 99, 499 | content: 500 | 'Ex cillum reprehenderit non amet fugiat qui magna duis laborum ea nisi exercitation aliquip esse. Excepteur aute id do aliquip culpa nostrud adipisicing ipsum elit. Anim do consequat et cupidatat deserunt cillum sunt sunt. Amet deserunt deserunt aliqua aute deserunt eu non eiusmod. Qui culpa proident deserunt consequat est aute excepteur esse. Sint duis laboris consectetur aute. Irure quis eiusmod tempor ea sit anim fugiat enim.', 501 | }, 502 | ]; 503 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | import {FC, RefObject} from 'react'; 2 | 3 | export type ReactSmartScrollRow = FC<{ 4 | data: any; 5 | height: number; 6 | rowIndex: number; 7 | rowRef: RefObject; 8 | } & Record>; 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "declaration": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "allowSyntheticDefaultImports": true, 14 | "strict": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "noFallthroughCasesInSwitch": true, 17 | "module": "esnext", 18 | "moduleResolution": "node", 19 | "resolveJsonModule": true, 20 | "isolatedModules": true, 21 | "noEmit": true, 22 | "jsx": "react-jsx" 23 | }, 24 | "include": [ 25 | "src" 26 | ], 27 | "exclude": [ 28 | "node_modules", 29 | "dist", 30 | "src/stories", 31 | "src/setupTests.ts" 32 | ] 33 | } 34 | 35 | --------------------------------------------------------------------------------