React Media View

A simple media view component for React.

Installation

The package can be installed via NPM:

npm install --save react-media-view

Examples

• Basic Example
• Event Handler Example
• Overlay Example
• Custom Image Example
• Multi Select Example
• Instagram Example

Basic Usage

You can basically use the library with an array of objects which have objects with src property.

import React, {Component} from 'react';
import ReactMediaView from "react-media-view";

class ReactMediaViewExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      media: [
        {
          src: "https://images.unsplash.com/photo-1531386450450-969f935bd522?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b0e6037f0a7cd63b48cc1562e348eb3a&auto=format&fit=crop&w=750&q=80"
        },
        {
          src: "https://images.unsplash.com/photo-1518128958364-65859d70aa41?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=df90aec8aaec700a402790e4799d226e&auto=format&fit=crop&w=774&q=80"
        },
        {
          src: "https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d4147a2e4e3f79299e2f0c92b13db9ee&auto=format&fit=crop&w=668&q=80"
        },
        {
          src: "https://images.unsplash.com/photo-1510797215324-95aa89f43c33?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f8dee688d0e8cbb8c6c99de58f22a7dc&auto=format&fit=crop&w=750&q=80"
        },
        {
          src: "https://images.unsplash.com/photo-1504511045-dc6e5c9bea25?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a88ada821297d024419edbf111a244e7&auto=format&fit=crop&w=800&q=80"
        },
        {
          src: "https://images.unsplash.com/photo-1502083728181-687546e77613?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e11ef2edff62a7a7701cfbe89d020b19&auto=format&fit=crop&w=1650&q=80"
        },
        {
          src: "https://images.unsplash.com/photo-1489619243109-4e0ea59cfe10?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=974d4283fca93c49c75f8b19a4b6abbf&auto=format&fit=crop&w=1650&q=80"
        },
        {
          src: "https://images.unsplash.com/photo-1487622750296-6360190669a1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0966f85ba805ff53ab5c270e14548d6b&auto=format&fit=crop&w=800&q=80"
        }
      ]
    };
  }

  render() {
    return (
      <ReactMediaView media={this.state.media}/>
    );
  }
}

export default ReactMediaViewExample;

Property List

Name	Description	Is Required	Type	Default Value	Expected Values
media	Array of media objects that you want to display	true	array	empty	Any array of objects (objects must require a src property)
className	Custom class name that you want to describe for your media view component	false	string	empty	Any CSS class name
columnCount	Column count	false	number	3	Any integer value
rowHeight	Row height	false	number	200	Any integer value (in pixels)
gap	Gap size between items	false	number	1	Any integer value (in pixels)
emptyState	Custom node that you want to show when there is no media element	false	node	There is no media to show :(	Any html value
stretchLastItem	Boolean prop to define stretching the last item or not	false	bool	false	true or false
overlayTrigger	Enum prop to define overlay showing trigger	false	string	empty	mount, hover, click or toggle
overlay	Function to define overlay node	false	function	empty	Any javascript function that returns html
image	Function to define custom image node	false	function	empty	Any javascript function that returns html
onMouseEnter	Function that you want to run when mouse entered on an element	false	function	empty	Any javascript function
onMouseLeave	Function that you want to run when mouse leaved from an element	false	function	empty	Any javascript function
onClick	Function that you want to run when clicked on an element	false	function	empty	Any javascript function

Lıcence

MIT ©

Support

Bedirhan Karadoğan | Patreon