React Image Lightbox Fit
Example
import React from 'react';import render from 'react-dom';import LightBoxFit from 'react-image-lightbox-fit'; const App = <div> <div ="visible-xs visible-sm"> <LightBoxFit = = /> </div> <div ="container"> <div ="row"> <div ="col-md-9 hidden-xs hidden-sm"> <LightBoxFit = = /> </div> <div ="col-md-3"> <h1>Hello world</h1> <p>This is a test paragraph</p> </div> </div> </div> </div> ; ;
Props
ReactImageLightboxFitpropTypes = height: PropTypesnumberisRequired images: PropTypesisRequired;
Result
Desktop
Mobile
Dev Mode
- Clone this repository
- Run
yarn install
(Usage of Yarn is recommended) - Edit the
src/index.jsx
file and then runnpm run dev
. - This will start the
webpack-dev-server
- Then open your browser at
localhost:3100
- The browser will be updated everytime you change the code at
src/index.jsx
Dev Features
- Linting with eslint
- Linting code style: Airbnb
- Testing with
jest@^21.2.1
andenzyme@^3.1.1
- Uses
babel
for JS transpiling - Uses
webpack
for building the code
Folder structure
/src
: The module code/test
: The tests for thesrc
components/build
: The target compilation directory
Credits
Juan Camilo Guarín Peñaranda
Otherwise SAS
Cali, Colombia, 2017
License
MIT