Top
ScrollContainer - Getting started
ScrollContainer
Zippytech React ScrollContainer Pro is a commercial component and as such, it is distributed via a private npm registry (https://registry.zippytech.io). So getting it installed requires the following steps:
  1. getting a commercial license - for now, you need a <DataGrid /> license in order to use the <ScrollContainer /> - see the Pricing page and buy a license.
  2. we'll provide you with a username and password
  3. point your npm client to the correct registry for components scoped inside the @zippytech scope.
    $ npm config set @zippytech:registry https://registry.zippytech.io
    Even though you are setting the private registry for the @zippytech scope, you will still be able to use our open-source components, since the private registry forwards any requests for our free components to the public npm registry.
  4. login with your username for the @zippytech scope, on the private registry:
    $ npm login --registry=https://registry.zippytech.io --scope=@zippytech
    
    This will keep you logged-in with your current npm username outside of the @zippytech scope.
  5. check you are correctly logged-in for our private registry.
    $ npm whoami --registry=https://registry.zippytech.io
    
    This should display the username from step 2.
After those install steps, you should be able to install the <ScrollContainer /> as usual:
$ npm install @zippytech/react-scroll-container-pro --save
To start using the <ScrollContainer /> component, all you need to import is React, the code and styles of the component itself: @zippytech/react-scroll-container-pro and @zippytech/react-scroll-container-pro/index.css.
The <ScrollContainer /> can be used instead of a <div /> with overflow: auto. The single purpose of the <ScrollContainer /> is to provide custom OSX-like scrollbars that look nice on all platforms.
This is the most basic setup for a <ScrollContainer />. In the following sections we'll explore how to use the <ScrollContainer /> component and explain important props.
We've tried to make the <ScrollContainer /> as much as possible as a drop-in replacement to a <div />. As such, all the standard browser/scroll keyboard interaction just works, so you can use arrow keys/space to scroll.
Also, you can scroll programatically by using scrollTop/scrollLeft as setters or read the scroll position by using them as getters.