Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 4x 48x 48x 48x 48x 21x 21x 21x 48x 21x 21x 48x 21x 48x 48x 4x 4x | import React, { useState, createRef, useEffect } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import PerfectScrollbar from 'perfect-scrollbar'; import 'perfect-scrollbar/css/perfect-scrollbar.css'; const Scrollbar = props => { const { tag: Tag, className, settings, ...attributes } = props const [instance, setInstance] = useState(); const ref = createRef(); useEffect(() => { init(); return () => { uninit(); } }, []); const init = () => { /* istanbul ignore else */ if (!instance) { createPerfectScrollbar() } } const createPerfectScrollbar = () => { setInstance(new PerfectScrollbar(ref.current)) } const uninit = () => { /* istanbul ignore next */ if (instance) { instance.destroy() setInstance(null) } } return ( <Tag className={classNames(className)} style={{ position: 'relative' }} {...attributes} ref={ref} /> ) } Scrollbar.propTypes = { tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), className: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]), settings: PropTypes.object, switcher: PropTypes.bool, innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]) }; Scrollbar.defaultProps = { tag: 'div' }; export default Scrollbar; |