react-fancy-vitrine v1.2.2

React Fancy Vitrine

A fancy vitrine to your products and galleries in react.

Credits

A lib based on react-image-carousel and react-image-magnifiers.

Demo

https://leoncarey.github.io/react-fancy-vitrine

Install

npm install --save react-fancy-vitrine

or

yarn add react-fancy-vitrine

Usage

import ReactFancyVitrine from 'react-fancy-vitrine'

function App () {
    return (
      <div>
        <ReactFancyVitrine
          images={images}
          containerWidth={600}
          effect='fade'
          timingEffect={300}
          buttonPosition="default"
          borderColorSelected='#f4442e'
          buttonBgColor={{
            default: '#f1f1f1',
            hover: '#ddd'
          }}
        />
      </div>
    )
}

Props

{
  images?: ImageType[];             // Array with ImageType objects
  theme?: string                    // Theme plugin default or fancy
  containerWidth?: string | number; // Container element width
  borderColorSelected?: string;     // Border color for selected thumb
  hasButtons?: boolean              // If show buttons
  buttonPosition?: string;          // Positions of buttons Prev and Next
  buttonBgColor?: {
    default?: string; // Buttons color default
    hover?: string;   // Buttons color when hover it
  };
  effect?: string;          // Carousel effect 
  timingEffect?: number;    // Timing transition between effects in milliseconds
  className?: string;       // Your custom className
}

ImageType

{
  id?: number;
  url: string;
}

License

MIT © leoncarey