import Baron from 'react-baron'
// or Baron = require('react-baron')
 
...
<Baron>
  ...Scrollable content here...
</Baron>

import Baron from 'react-baron/dist/es5'
// or Baron = require('react-baron/dist/es5')
 
...
<Baron>
  ...Scrollable content here...
</Baron>

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'
}

// 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;