fotorama-react-wrapper

A simple reactjs wrapper for fotorama.io, the Simple and Light JQuery Gallery!

Features:

• Tiny size! ~waow!

• Vanilla JS CDN dependency imports! ~no way!
• Easy to use! ~what a dream come true!

Install

npm install fotorama-react-wrapper
or
yarn add fotorama-react-wrapper

Usage

(Recommended) To add dependencies for Fotorama via vanilla js, add the imp property

...
import Fotorama from 'fotorama-react-wrapper'

const App = () => (
	<div className="App">
		<Fotorama imp >
			<img src="https://s.fotorama.io/1.jpg" />
			<img src="https://s.fotorama.io/2.jpg" />
			<img src="https://s.fotorama.io/3.jpg" />
		</Fotorama >
	</div>
)

If you are manually adding dependencies for fotorama (See: Fotorama Set-Up Pg )

...
import Fotorama from 'fotorama-react-wrapper'

const App = () => (
	<div className="App" >
		<Fotorama >
			<img src="https://s.fotorama.io/1.jpg" />
			<img src="https://s.fotorama.io/2.jpg" />
			<img src="https://s.fotorama.io/3.jpg" />
		</Fotorama >
	</div>
)

Customization

See: Fotorama.io Customization Section

...
import Fotorama from 'fotorama-react-wrapper'

const App = () => (
	<div className="App">
		<Fotorama
		   data-allowfullscreen="true"
		   data-nav="thumbs"
		   data-width="800"
		   data-height="600" >
			<img src="https://s.fotorama.io/1.jpg" />
			<img src="https://s.fotorama.io/2.jpg" />
			<img src="https://s.fotorama.io/3.jpg" />
		</Fotorama >
	</div>
)