react-stack-gallery v1.0.4

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}>

Example

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