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.

github microsoft / BotFramework-WebChat / packages / component / src / Styles / StyleSet / SuggestedActionsStyleSet.js View on Github external
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,
github microsoft / BotFramework-WebChat / packages / component / src / Activity / CarouselLayout.js View on Github external
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%' &amp;&amp; (
              
                </div>

react-film

React component for showing carousel just like a film strip

MIT
Latest version published 2 years ago

Package Health Score

48 / 100
Full package analysis

Popular react-film functions