flex-cards v0.1.5

React Flex Cards

Installation

npm install flex-cards

Minimal setup example

const cards = [
  {
    img: {
      src: 'http://example.com/example/img1.jpg',
      alt: 'Lorem ipsum'
    },
    title: 'Lorem ipsum',
    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
    href: 'http://example.com'
  },
  {
    img: {
      src: 'http://example.com/example/img2.jpg',
      alt: 'Lorem ipsum'
    },
    title: 'Lorem ipsum',
    description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
    href: 'http://example.com'
  },
  ...
];

<FlexCards cards={cards} />;

You can also show iFrames (useful e.g. for YouTube videos) or videos (.mp4 or .ogg) instead of images. To do this, write the following iframe or video object instead of your img object in your data array:

  {
    iframe: {
      src: 'https://www.youtube.com/embed/HxM46vRJMZs',
    },
    ...
  }

  {
    video: {
      src: {
        mp4: 'video.mp4',
        ogg: 'video.ogg'
      }
    },
    ...
  }

If you enter more than one media object (img, iframe, video), the image will be shown by default. If no image is available default will be iFrame. You can override this behaviour with the prop mediaPriority.

<FlexCards cards={cards} mediaPriority="video" />

If the mediaPriority is set e.g. to video the video will be shown even if there is an image or an iFrame. If there is no video available, the image or the iFrame will still be shown.
With the prop noMedia you can hide images, iFrames and videos. This will override the mediaPriority prop.
With the prop noTextbox you can hide the text box below the media box.

Props

With props you have a lot of possibilities to easily customize this module.

License

Licensed under the MIT license by Peter R. Stuhlmann.