react-stack-gallery

A simple component for React that provides gallery like 'pinterest'

Tech

• Node.js
• React
• TypeScript
• webpack
• Jest
• enzyme

Installation

npm install [--save-dev] react-stack-gallery

Usage

import React from 'react'
import Gallery from 'react-stack-gallery'
 
const App = () => {
  return (
    <Gallery>
      <img src="1.jpg" style={{width: '100%'}} />
      <img src="2.jpg" style={{width: '100%'}} />
      <img src="3.jpg" style={{width: '100%'}} />
    </Gallery>
  )
}
 
export default App

or

import React from 'react'
import Gallery from 'react-stack-gallery'
 
const App = () => {
  return (
    <Gallery>
      <div className="image" style={{width: '100%'}}>element</div>
      <div className="image" style={{width: '100%'}}>element</div>
      <div className="image" style={{width: '100%'}}>element</div>
    </Gallery>
  )
}
 
export default App

TypeScript:

import React from 'react'
import Gallery from 'react-stack-gallery'
 
const App: React.FC = () => {
  return (
    <Gallery>
      <img src="1.jpg" style={{width: '100%'}} />
      <img src="2.jpg" style={{width: '100%'}} />
      <img src="3.jpg" style={{width: '100%'}} />
    </Gallery>
  )
}
 
export default App

Props

<Gallery screen={1200} lines={5} marginPerc={0.03}>

props	description
screen	Specify the overall width in px. (default: window.innerWidth)
lines	The number of items to be placed side by side.(default: 2)
marginPerc	Set the margin. (default: 0.04)

Example

$ git clone git://github.com/hktysk/react-stack-gallery.git
$ cd react-stack-gallery
$ npm start