\n \n \n );\n}\n\nexport default App;\n```\n\nCheck out Example in `example-nextjs` folder for info how to implement more features like mouse drag or disable body scroll.\n\n## Example\n\nYou can clone repository and run demo project.\n\n```bash\ngit clone https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu\nyarn install\nyarn run demo\n```\n\n### Helpers and api\n\nChildren of main ScrollMenu component(arrows, fotter, items) can use **VisibilityContext** to access state and callbacks.\nFunction callbacks also pass context, eg `onWheel`, `onScroll` etc.\n\n## Properties and callbacks\n\n| Prop | Signature |\n| ------------------------ | ------------------------------------------------------------- |\n| LeftArrow | React component for left arrow |\n| RightArrow | React component for right arrow |\n| Header | React component Header |\n| Footer | React component Footer |\n| onWheel | (VisibilityContext, event) => void |\n| onScroll | (VisibilityContext, event) => void, will fire _before_ scroll |\n| onInit | (VisibilityContext) => void |\n| apiRef | React.RefObject |\n| onUpdate | (VisibilityContext) => void |\n| onMouseDown | (VisibilityContext) => (React.MouseEventHandler) => void |\n| onMouseUp | (VisibilityContext) => (React.MouseEventHandler) => void |\n| onMouseMove | (VisibilityContext) => (React.MouseEventHandler) => void |\n| itemClassName | ClassName of Item |\n| separatorClassName | ClassName of Item's separator |\n| scrollContainerClassName | ClassName of scrollContainer |\n| transitionDuration | Duration of transitions in ms, default 500 |\n| transitionBehavior | 'smooth' \\|'auto' \\| customFunction |\n| transitionEase | Ease function, eg t => t\\*(2-t) |\n| wrapperClassName | ClassName of the outer-most div |\n| RTL | Enable Right to left direction |\n| noPolyfill | Don't use polyfill for scroll, no transitions |\n\n### VisibilityContext\n\n| Prop | Signature |\n| ----------------------------- | ------------------------------------------------------ |\n| getItemById | itemId => IOItem \\| undefined |\n| getItemElementById | itemId => DOM Element \\| null |\n| getItemByIndex | index => IOItem \\| undefined |\n| getItemElementByIndex | index => DOM Element \\| null |\n| getNextItem | () => IOItem \\| undefined) |\n| getPrevItem | () => IOItem \\| undefined |\n| initComplete | boolean |\n| isFirstItemVisible | boolean |\n| isItemVisible | itemId => boolean |\n| isLastItem | boolean |\n| isLastItemVisible | boolean |\n| scrollNext | (behavior, inline, block, ScrollOptions) => void |\n| scrollPrev | (behavior, inline, block, ScrollOptions) => void |\n| scrollToItem | (item, behavior, inline, block, ScrollOptions) => void |\n| visibleItemsWithoutSeparators | ['item1', 'item2'] |\n| initComplete | boolean |\n| items | ItemsMap class instance |\n| scrollContainer | Ref |\n| visibleItems | ['item1', 'item1-separator', 'item2'] |\n\n### Transition/Animation\n\nNOTE: won't work with RTL prop\n\nCan use `transitionDuration`, `transitionEase` and `transitionBehavior`\nSee [example](https://codesandbox.io/s/custom-transition-animation-n2pyn)\n\n#### ScrollOptions for scrollToItem, scrollPrev, scrollNext\n\nWill override transition\\* options passed to ScrollMenu\n\n```javascript\n{\n // target,\n behavior, // 'smooth', 'auto' or custom function\n // inline,\n // block,\n {\n duration: number, // number in milliseconds\n ease: (t) => t, // ease function, more https://gist.github.com/gre/1650294#file-easing-js\n };\n}\n```\n\n### Other helpers\n\n#### slidingWindow\n\nCan get previous or next visible group of items with `slidingWindow(allItems: string[], visibleItems: string[])` helper, e.g\n\n```\nslidingWindow(allItems, visibleItems)\n.prev()\n//.next()\n```\n\n#### getItemsPos\n\nCan get first, center and last items, e.g.\n\n```\nconst prevGroup = slidingWindow(allItems, visibleItems).prev()\nconst { first, center: centerItem, last } = getItemsPos(prevGroup)\n\n// and scroll to center item of previous group of items\nscrollToItem(getItemById(centerItem, 'smooth', 'center'))\n\n```\n\nCheck out [examples](#examples)\n\n### apiRef\n\nCan pass Ref object to Menu, current value will assigned as VisibilityContext. But `visibleItems` and some other values can be staled, so better use it only for firing functions like `scrollToItem`.\n\nFor scrolling use `apiRef.scrollToItem(apiRef.getItemElementById)` instead of `apiRef.scrollToItem(apiRef.getItemById)`.\n\nCan get item outside of context via `apiRef.getItemElementById(id)` or directly via `` document.querySelector(`[data-key='${itemId}']`) ``.\nSee [`apiRef` example and `Add item and scroll to it`](#examples)\n\n## Browser support\n\n- Browser must support **IntersectionObserver API** and **requestAnimationFrame** or use polyfills.\n- Only modern browsers, no IE or smart toasters\n\n## About\n\nMy first npm project. Sorry for my english.\n\nAny contribution and correction appreciated. Just fork repo, commit and make PR, don't forget about tests.\n\n## [Contributing](https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu/blob/main/CONTRIBUTING.md)\n\n## [Changelog](https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu/blob/main/CHANGELOG.md)\n","readmeFilename":"README.md"}