React Scroll Box


_Note_ I'm currently working on resct-scroll-box@0.3. It would contain 50+ configurable paramters and would provide fine grained tracking of scrolling events and their causes.

Charged cross-browser and cross-platform scrollable container implementation with no external dependencies but React 0.13+.

Requires classList polyfill to work properly in IE9+.

Tested in FF, Chrome, Safari, iOS Safari, Opera and IE9+.

Any help with improvement of this component would be greatly appreciated.

API Playground and Live Demo

Contents

1. Motivation
2. ScrollBox
1. Attributes
3. GenericScrollBox
1. Layout
2. Properties
3. Methods
4. License

Motivation

- Use custom or native scroll bars.
- Highly customizable tracks and handles for both mobile and desktop.
- Inset and outset scroll bars with ease.
- Optional fallback to native inertial scrolling on mobile devices.
- Animated and smooth scrolling with customizable easing functions.
- Scrollbars detect mouse in close proximity and change their style accordingly for better UX.
- Scrollbars are automatically added, removed and resized when scroll box dimensions are changed.
- Scrolling speed is equalized among browsers.
- Customizable keyboard scrolling support.
- Scroll boxes can be nested.
- Custom viewports can be used. Have a look at react-text-input for textarea with customizable scrollbars.
- Conditionally unwrap scroll box to scroll its content along with page. This can even be done using a media query.
- Scrollbar size represents ratio of content and viewport sizes and can be constrained from CSS.
- LESS styles with a mixin to simplify coloring.
- Lots of other properties to customize scrolling behavior.

ScrollBox

In most cases you should use ScrollBox to create a scrollable area, but in case you need more control over viewport use GenericScrollBox.

By default, ScrollBox has no decoration and behaves as a regular div container. Specify height for scroll box in your styles, otherwise container would contract to zero height.

``jsx
var ScrollBox = require('react-scroll-box').ScrollBox; // ES5

import {ScrollBox, ScrollAxes, FastTrack} from 'react-scroll-box'; // ES6


Place any content here.

`

$3

#### boolean nativeScroll
Use native scrollbars. By default, this flag is set to true on mobile platforms and false on desktops. Paltforms are distinguished by presence of window.orientation.

#### ScrollAxes axes = ScrollAxes.XY
Scroll axes which are managed by the scroll box. If scroll axis is not listed then corresponding scroll offset would be constantly equal to 0 and any scrolling requests via API or from UI for that axes would be ignored.

#### integer hoverProximity = 50
Maximum distance in pixels between cursor and scroll track edge when track is considered to be hovered. Useful when you want to have thin scrollbars and increase theit thickness when cursor aproaches them so user don't have to aim precisely. Set to 0 to disable hover proximity detection.

#### boolean disabled = false
Disable scroll box.

#### boolean outset = false
Display scrollbars outside of scrollable area. Outset scrllbars don't require additional space and don't affect surrounding layout. On mobile devices when native scrollbars are used this property has no effect because scrollbars have zero width and thus don't crop any space from viewport.

#### integer scrollMinX = 2 scrollMinY = 2
Minimum difference in pixels in content and viewport sizes to enable scrolling.

#### boolean captureKeyboard = true
Use keyboard for scrolling when scroll box viewport or its nested content is focused. Keyboard is not captured for and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> elements placed inside scroll box. <kbd>PgUp</kbd> <kbd>PgDown</kbd> <kbd>Home</kbd> <kbd>End</kbd> and arrow keys are captured. You can page-scroll alternate axis with <kbd>Shift</kbd> + <kbd>PgUp</kbd> and <kbd>Shift</kbd> + <kbd>PgDown</kbd> shortcuts.</p><p class="my-3">#### <code><i>integer</i> keyboardStepX = 30</code> <code>keyboardStepY = 30</code><br />Distance in pixels to scroll by when arrow keys are pressed.</p><p class="my-3">#### <code><i>integer</i> keyboardScrollDuration = 200</code><br />Keyboard smooth scrolling animation duration in milliseconds. Set to 0 to disable smooth keyboard scrolling.</p><p class="my-3">#### <code><i><a href="#fast-track" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">FastTrack</a></i> fastTrack = <a href="#fast-track-goto" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">FastTrack.GOTO</a></code><br />Defines expected behavior when user clicks on scroll track. </p><p class="my-3">#### <code><i>integer</i> fastTrackDuration = 500</code><br />Animation duration of fast track smooth scroll.</p><p class="my-3">#### <code><i>boolean</i> captureHandleDrag = true</code><br />Allow user to drag scroll handles. If handle drag is disabled along with enabled fast track then clicking on a handle would cause fast tracking.</p><p class="my-3">#### <code><i>boolean</i> captureWheel = true</code><br />Use mouse wheel for scrolling. You can scroll alternate axis with <kbd>Shift</kbd> key is pressed.</p><p class="my-3">#### <code><i>integer</i> wheelStepX = 30</code> <code>wheelStepY = 30</code><br />Wheel scrolling distance in pixels. Scroll box heavily relies on native wheel implementation, so this speed can vary a bit depending on browser, platform and scrolling device (trackpad or mouse wheel).</p><p class="my-3">#### <code><i>boolean</i> propagateWheelScroll = false</code><br />Propagate wheel scroll event to parent if scrolling reached maximum or minimum value.</p><p class="my-3">#### <code><i>boolean</i> swapWheelAxes = false</code><br />Swap wheel scrolling axes.</p><p class="my-3">#### <code><i>integer</i> wheelScrollDuration = 100</code><br />Wheel smooth scrolling animation duration. Set to 0 to disable smooth wheel scrolling.</p><p class="my-3">#### <code><i>string</i> className = "scroll-box--wrapped"</code><br />Style class name to use.</p><p class="my-3">#### <code><i>object</i> style</code><br />Style to apply to root element of scroll box.</p><p class="my-3">#### <a name="defaulteasing"></a><code><i>function</i> defaultEasing (percent, elapsed, min, max, duration)</code><br />Easing to use when none is provided.</p><p class="my-3">- <strong><code><i>float</i> percent</code></strong> Scroll percentage in range [0, 1].<br />- <strong><code><i>integer</i> elapsed</code></strong> Number of milliseconds passed since animation began.<br />- <strong><code><i>integer</i> min</code> <code>max</code></strong> Output value range.<br />- <strong><code><i>integer</i> duration</code></strong> Animation duration in milliseconds.</p><p class="my-3">#### <code><i>function</i> onViewportScroll (genericScrollBox)</code><br />Scroll event callback.</p><p class="my-3">- <strong><code><i><a href="#genericscrollbox" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">GenericScrollBox</a></i> genericScrollBox</code></strong> Reference to <a href="#genericscrollbox" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>GenericScrollBox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> that is being scrolled.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3"></code>GenericScrollBox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></h2></p><p class="my-3">Expects viewport element at its only child. Has all the same attributes as </code>ScrollBox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br />var GenericScrollBox = require('react-scroll-box').GenericScrollBox; // ES5</p><p class="my-3">import {GenericScrollBox, ScrollAxes, FastTrack} from 'react-scroll-box'; // ES6</p><p class="my-3"><GenericScrollBox style={{height: '200px'}} axes={ScrollAxes.Y} fastTrack={FastTrack.PAGING}><br /> <div className="scroll-box__viewport"><br /> Place any content here.<br /> </div><br /></GenericScrollBox><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><div class="scroll-box scroll-box--wrapped"><br /> <div class="scroll-box__track scroll-box__track--x"><br /> <div class="scroll-box__handle scroll-box__handle--x"></div><br /> </div><br /> <div class="scroll-box__track scroll-box__track--y"><br /> <div class="scroll-box__handle scroll-box__handle--y"></div><br /> </div><br /> <div class="scroll-box__viewport"><br /> Place any content here.<br /> </div><br /></div><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Class Name | Description<br />--- | ---<br /></code>scroll-box--wrapped<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Causes scroll box to look like an actual scroll box. If omitted, then scrollbox behaves like a simple </code>div<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element.<br /></code>scroll-box--disabled<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Scroll box is disabled. By default, hides scrollbars and prevents scrolling.<br /></code>scroll-box--native<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Display native scroll bars.<br /></code>scroll-box--outset<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Show scroll bars ouside of scrollable area.<br /></code>scroll-box--has-axis-x<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Scroll box can be scrolled horizintally if content is wider than viewport.<br /></code>scroll-box--has-axis-y<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Scroll box can be scrolled vertically if content is taller than viewport.<br /></code>scroll-box--show-axis-x<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Content is wider than viewport.<br /></code>scroll-box--show-axis-y<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Content is taller than viewport.<br /></code>scroll-box__track--hover<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Tack is hovered.<br /><code>scroll‑box__track‑‑dragged</code> | Track handle is dragged.</p><p class="my-3">Modifier </code>.scroll-box--wrapped-on-large-screens<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> would conditionally wrap scroll box on screens larger than 360 px. Content would be scrolled along with page itself on smaller screens.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">less<br />@media (min-width: 360px) {<br /> .scroll-box--wrapped-on-large-screens {<br /> .scroll-box-wrap();<br /> }<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### <code><i>HTMLDivElement</i> handleX</code> <code>handleY</code><br />Handle elements. Both are always available, even if <a href="#genericscrollbox-axes" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>axes<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> exclude one or both of them.</p><p class="my-3">#### <code><i>HTMLDivElement</i> trackX</code> <code>trackY</code><br />Track elements. Both are always available.</p><p class="my-3">#### <code><i>HTMLElement</i> viewport</code><br />Viewport element provided to </code>GenericScrollBox<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">#### <code><i>integer</i> targetX</code> <code>targetY</code><br />Scroll position in pixels that was last requested.</p><p class="my-3">#### <code><i>integer</i> previousX</code> <code>previousY</code><br />Previously requested scroll position.</p><p class="my-3">#### <code><i>integer</i> scrollX</code> <code>scrollX</code><br />Actual scroll position that user observes. This changes repeatedly during scroll animation, when no animation is in proggress equals to </code>targetX<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>targetY<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> respectively.</p><p class="my-3">#### <code><i>integer</i> scrollMaxX</code> <code>scrollMaxY</code> <br />Maximum values for horizontal and vertical content scroll positions. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollMaxX" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MDN </code>window.scrollMaxX<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> for more info.</p><p class="my-3">#### <code><i>integer</i> trackMaxX</code> <code>trackMaxY</code><br />Maximum values for horizontal and vertical track scroll positions. When <a href="#genericscrollbox-nativescroll" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>nativeScroll<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> is set to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> these are constanly equal to 0.</p><p class="my-3">#### <code><i>boolean</i> exposesX</code> <code>exposesY</code><br />Does scroll box require actual presence of horizontal or vertical scroll bars. If set to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, then axis is permitted via </code>props.axes<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and corresponding </code>scrollMax<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is greater or equal to </code>scrollMin<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### <code><i>void</i> scrollBy(dx, dy, duration, easing, silent)</code></p><p class="my-3">Scroll by the given amount of pixels.</p><p class="my-3">- <strong><code><i>integer</i> dx = 0</code> <code>dy = 0</code></strong> Amount of pixels to scroll by. Positive coordinates will scroll to the right and down the content. Negative values will scroll to the left and up the content. If non-numeric value are provided then corresponding position of scroll bar coordinate is not changed.<br />- <strong><code><i>integer</i> duration = 0</code></strong> Duration of scrolling animation.<br />- <strong><code><i>function</i> easing = <a href="#defaulteasing">defaultEasing</a></code></strong> Scroll easing function.<br />- <strong><code><i>boolean</i> silent = false</code></strong> Set to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to prevent invocation of </code>onViewportScroll<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> until requested scrolling is finished. Can be used for synchronization of multiple scroll areas.</p><p class="my-3">#### <code><i>void</i> scrollTo(x, y, duration, easing, silent)</code></p><p class="my-3">Scroll to arbitrary content position.</p><p class="my-3">- <strong><code><i>integer</i> x = undefined</code> <code>y = undefined</code></strong> Position to scroll to. If non-numeric value are provided then corresponding position of scroll bar coordinate is not changed.<br />- <strong><code><i>integer</i> duration = 0</code></strong> Duration of scrolling animation.<br />- <strong><code><i>function</i> easing = <a href="#defaulteasing">defaultEasing</a></code></strong> Scroll easing function.<br />- <strong><code><i>boolean</i> silent = false</code></strong> Set to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to prevent invocation of </code>onViewportScroll` until requested scrolling is finished. Can be used for synchronization of multiple scroll areas.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">The code is available under <a href="LICENSE.txt" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MIT licence</a>.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"28:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n29:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\u003e=0.13.0\"}]\n"])</script><script>self.__next_f.push([1,"2a:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":19}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"babel-core\",{\"href\":\"/package/babel-core\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-core\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"6.3.26\"}]]}],[\"$\",\"$L5\",\"babel-loader\",{\"href\":\"/package/babel-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"6.2.0\"}]]}],[\"$\",\"$L5\",\"babel-plugin-transform-runtime\",{\"href\":\"/package/babel-plugin-transform-runtime\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L2c\",\"$undefined\"]}],\"babel-plugin-transform-runtime\"]}],\"$L2d\"]}],\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"2c:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2d:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"6.6.0\"}]\n2e:[\"$\",\"$L5\",\"babel-preset-es2015\",{\"href\":\"/package/babel-preset-es2015\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-preset-es2015\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"6.6.0\"}]]}]\n2f:[\"$\",\"$L5\",\"babel-preset-react\",{\"href\":\"/package/babel-preset-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-preset-react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"6.5.0\"}]]}]\n30:[\"$\",\"$L5\",\"babel-preset-stage-0\",{\"href\":\"/package/babel-preset-stage-0\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-preset-stage-0\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"6.5.0\"}]]}]\n31:[\"$\",\"$L5\",\"classlist-polyfill\",{\"href\":\"/package/classlist-polyfill\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"classlist-polyfill\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"1.0.2\"}]]}]\n32:[\"$\",\"$L5\",\"classnames\",{\"href\":\"/package/classnames\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"roun"])</script><script>self.__next_f.push([1,"d\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"classnames\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\"}]]}]\n33:[\"$\",\"$L5\",\"css-loader\",{\"href\":\"/package/css-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"css-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.23.1\"}]]}]\n34:[\"$\",\"$L5\",\"extract-text-webpack-plugin\",{\"href\":\"/package/extract-text-webpack-plugin\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"extract-text-webpack-plugin\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.8.2\"}]]}]\n35:[\"$\",\"$L5\",\"file-loader\",{\"href\":\"/package/file-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"file-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.8.5\"}]]}]\n36:[\"$\",\"$L5\",\"hanson\",{\"href\":\"/package/hanson\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"hanson\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"~1.1.1\"}]]}]\n37:[\"$\",\"$L5\",\"hson-loader\",{\"href\":\"/package/hson-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/"])</script><script>self.__next_f.push([1,"2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"hson-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"~1.0.0\"}]]}]\n38:[\"$\",\"$L5\",\"html-webpack-plugin\",{\"href\":\"/package/html-webpack-plugin\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"html-webpack-plugin\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"1.6.1\"}]]}]\n39:[\"$\",\"$L5\",\"less\",{\"href\":\"/package/less\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"less\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"2.6.1\"}]]}]\n3a:[\"$\",\"$L5\",\"less-loader\",{\"href\":\"/package/less-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"less-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"2.2.2\"}]]}]\n3b:[\"$\",\"$L5\",\"style-loader\",{\"href\":\"/package/style-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"style-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.13.0\"}]]}]\n3c:[\"$\",\"$L5\",\"webpack\",{\"href\":\"/package/webpack\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncat"])</script><script>self.__next_f.push([1,"e font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"webpack\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"1.12.9\"}]]}]\n3d:[\"$\",\"$L5\",\"webpack-dev-server\",{\"href\":\"/package/webpack-dev-server\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"webpack-dev-server\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"1.12.0\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>