How to use react-film - 2 common examples
To help you get started, we’ve selected a few react-film examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
microsoft / BotFramework-WebChat / packages / component / src / Styles / StyleSet / SuggestedActionsStyleSet.js View on Github 
export default function createSuggestedActionsStyleSet({
paddingRegular,
transcriptOverlayButtonBackground,
transcriptOverlayButtonBackgroundOnDisabled,
transcriptOverlayButtonBackgroundOnFocus,
transcriptOverlayButtonBackgroundOnHover,
transcriptOverlayButtonColor,
transcriptOverlayButtonColorOnDisabled,
transcriptOverlayButtonColorOnFocus,
transcriptOverlayButtonColorOnHover
}) {
const originalStyleSet = createBasicStyleSet({
cursor: null,
flipperBoxWidth: 40,
flipperSize: 20,
scrollBarHeight: 6,
scrollBarMargin: 2
});
const flipper = css({
'& > div.slider > div': {
background: transcriptOverlayButtonBackground,
color: transcriptOverlayButtonColor,
outline: 0
},
'&:disabled > div.slider > div': {
backgroundColor: transcriptOverlayButtonBackgroundOnDisabled,const CarouselLayout = ({ activity, children, timestampClassName }) => {
const [{ carouselFlipper: carouselFlipperStyleSet }] = useStyleSet();
const leftLabel = useLocalize('Left');
const rightLabel = useLocalize('Right');
const filmStyleSet = createBasicStyleSet({ cursor: null });
return (
{({ scrollBarWidth }) => (
<div>
{children}
{scrollBarWidth !== '100%' && (
</div>react-film
React component for showing carousel just like a film strip
