npm.io
1.0.4 • Published 6 years ago

react-stack-gallery

Licence
MIT
Version
1.0.4
Deps
1
Size
8 kB
Vulns
0
Weekly
0
Stars
3
SummaryDependencyVersions

react-stack-gallery

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

MIT License Maintainability

Tech

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

Keywords

reactgallerypinterest