Merge pull request #24 from Zloka/support-htmldivelement-props

Add an optional `id` prop rootElement

Author: sakhnyuk

docs/API.md

@@ -18,6 +18,7 @@ order: 4
 | className | className for the root component | `string` | `undefined`
 | disableDefaultStyles | removes basic styling to ease visual customization | `boolean` | `false` 
 | hideTracksWhenNotNeeded | Hide tracks (`visibility: hidden`) when content does not overflow container. | `boolean` | `false` |
+| id | The `id` to apply to the root element | `string` | `undefined` |
 | onScroll | Event handler | `(e: React.UIEvent<HTMLElement>) => void` | `undefined` |
 | onScrollFrame | Runs inside the animation frame. Type of `ScrollValues` you can check below | `(values: ScrollValues) => void` | `undefined` |
 | onScrollStart | Called when scrolling starts | `() => void` | `undefined` |

src/Scrollbars/types.ts

@@ -13,6 +13,7 @@ export interface ScrollbarsProps {
   classes?: Partial<StyleClasses>;
   disableDefaultStyles: boolean;
   hideTracksWhenNotNeeded?: boolean;
+  id?: string;
   onScroll?: (e: React.UIEvent<HTMLElement>) => void;
   onScrollFrame?: (values: ScrollValues) => void;
   onScrollStart?: () => void;

test/Scrollbars/rendering.js

@@ -27,6 +27,19 @@ export default function createTests(scrollbarWidth) {
         );
       });
 
+      it('takes id', (done) => {
+        render(
+          <Scrollbars id="foo">
+            <div style={{ width: 200, height: 200 }} />
+          </Scrollbars>,
+          node,
+          function callback() {
+            expect(findDOMNode(this).id).toEqual('foo');
+            done();
+          },
+        );
+      });
+
       it('takes styles', (done) => {
         render(
           <Scrollbars style={{ width: 100, height: 100 }}>