Backpack mobile scroll container component.
npm install bpk-component-mobile-scroll-container> Backpack mobile scroll container component.
``sh`
npm install bpk-component-mobile-scroll-container --save-dev
`js
import React from 'react';
import { cssModules } from 'bpk-react-utils';
import BpkMobileScrollContainer from 'bpk-component-mobile-scroll-container';
import STYLES from './MyComponent.scss';
const getClassName = cssModules(STYLES);
export default () => ( if (index % 2 === 0) { return (
{new Array(10).fill().map((item, index) => {
const classNames = ['my-component__item'];
classNames.push('my-component__item--alternate');
}
{index}
);
})}
);
`
MyComponent.scss:
`scss
@import '~bpk-mixins/index.scss';
.my-component {
display: flex;
&__item {
display: flex;
min-width: $bpk-spacing-xxl * 5;
height: $bpk-spacing-xxl * 5;
justify-content: center;
align-items: center;
background-color: $bpk-color-sky-gray-tint-07;
&--alternate {
background-color: $bpk-color-sky-gray-tint-06;
}
}
}
``
| Property | PropType | Required | Default Value |
| --------------------------- | -------- | -------- | ------------- |
| children | node | true | - |
| className | string | false | null |
| leadingIndicatorClassName | string | false | null |
| scrollerRef | func | false | null |
| trailingIndicatorClassName | string | false | null |
| showScrollbar | bool | false | false |