react-baron
v3.0.0
Published
React component for baron scrollbar library
Downloads
231
Readme
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
import Baron from 'react-baron'
// 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:
import Baron from 'react-baron/dist/es5'
// 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):
.clipper {
position: relative;
overflow: hidden;
height: 100%;
}
.scroller {
overflow: auto;
height: 100%;
}
.scroller::-webkit-scrollbar {
width: 0;
height: 0;
}
.track {
display: none;
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
width: 0;
}
.track._h {
top: auto;
width: auto;
height: 0;
left: 2px;
}
.baron > .track {
display: block;
}
.bar {
position: absolute;
right: 0;
width: 6px;
border-radius: 3px;
background: #ccc;
}
.bar._h {
bottom: 0;
right: auto;
width: auto;
height: 6px;
}
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 =
:
props.params = {defaultParams} // Object that will be passed to baron as `params` (see baron API https://github.com/Diokuz/baron)
props.clipperCls = "clipper" // className for clipper/root dom node
props.scrollerCls = "scroller" // className for scroller dom node
props.trackCls = "track" // className for track dom node
props.barCls = "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={(r) => this.baronRef = r}>
// Then you have some ReactBaron methods
// Scroll as far as possible
this.baronRef.scrollToLast()
// Get DOM-node scroller
this.baronRef.getScroller();
// Get DOM-node clipper
this.baronRef.getClipper();
// onScroll handler
onScroll: PropTypes.func;
Browsers support
| | | | | | | |:---:|:---:|:---:|:---:|:---:|:---:| | 8+ ✔ | 3.6+ ✔ | 10+ ✔ | 11.5+ ✔ | 5.1+ ✔ | 4+ ✔ |