React-baron
- Native scroll mechanic
- No extra css (css-modules) by default
- Flexible configuration:
- vertical, horizontal and bidirectional scroll;
- nested scrollers;
- flexbox;
- different width/height modes.
- Full css customization: no inline styles, change css and/or classNames as you want
- Auto show/hide/resize/update
- Isomorphic (server side rendering support out of the box)
- Wide range of browsers support (ie10+, Safari5+, Android4+, Opera11+)
- 100% code coverage
- 5.9 kB (gzip)
How to use
npm i react-baron --save
Default way
// or Baron = require('react-baron') ...<Baron> ...Scrollable content here...</Baron>
Note: you need configured loaders: babel-loader
and css-modules
in your application.
If you have any problems this way, follow manual way:
Manual way
- Import from custom path:
// or Baron = require('react-baron/dist/es5') ...<Baron> ...Scrollable content here...</Baron>
- Add css from
react-baron/src/styles.css
(via postcss-global-import or something else):
Note: you can change any classNames: just pass them as props to Baron (see below).
API
All props are optional. You can see default props next to =
:
propsparams = defaultParams // Object that will be passed to baron as `params` (see baron API https://github.com/Diokuz/baron)propsclipperCls = "clipper" // className for clipper/root dom nodepropsscrollerCls = "scroller" // className for scroller dom nodepropstrackCls = "track" // className for track dom nodepropsbarCls = "bar" // className for bar dom node // Note, that defaultParams is not actually a default prop, it is a defaults for `props.params` object.defaultParams = barOnCls: 'baron' direction: 'v'
Plus, from within your component you have the following methods:
// Define ref<Baron ref= thisbaronRef = r> // Then you have some ReactBaron methods // Scroll as far as possiblethisbaronRef // Get DOM-node scrollerthisbaronRef; // Get DOM-node clipperthisbaronRef; // onScroll handleronScroll: PropTypesfunc;
Browsers support
8+ ✔ | 3.6+ ✔ | 10+ ✔ | 11.5+ ✔ | 5.1+ ✔ | 4+ ✔ |