React-fb-collage NPM

react-fb-collage

Image Grid or Collage component for React

NPM

stable release version:
package downloads:

Show Case

npm.io

Getting Started

Installation

npm i react-fb-collage --save

Basic Usage

Initialization of a react project

$ npx create-react-app AwesomeProject

Note: GUIDE

Then, cd AwesomeProject
Install library

$ npm i react-fb-collage

Then, edit AwesomeProject/App.js, like this:

import React from "react";
import FBCollage from "react-fb-collage";

function App() {
    const images = [
        "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",
        "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",
        "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",
        "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",
        "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",
        "https://upl/oad.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",
  ];

  return (
    <div className="App">
      <FBCollage
        style={{ backgroundColor: "black" }}
        images={images}
        height={720}
        width={592}
        borderRadius={40}
      />
    </div>
  );
}

export default App;

Props

parameter	type	required	description	default
images	array	yes	The array of image sources of require('../image-file') or 'imageURL' or both
imageOnPress	function`(index, images) => void`	no	The callback for image on press listener	`() => {}`
width	number	no	The width of the view	`357`
height	number	no	The height of the view	`200`
borderRadius	number	no	The border radius of the images	`12`
spacing	number	no	The spacing between the images and the view	auto
style	object	no	To override the main view style	default
overlayStyle	object	no	To override the text view overlay style	default
textStyle	object	no	To override the text style	default