react-responsive-carousel - npm Package Compare versions

Comparing version 0.1.6 to 2.0.0

__tests__/Carousel.js

 /** @jsx React.DOM */
 
 describe("Carousel", function() {
-	var React = require('react/addons');
-	var TestUtils = React.addons.TestUtils;
+	var React = require('react');
+	var TestUtils = require('react-addons-test-utils');
+	var ReactDOM = require('react-dom');
+	
 	var findByTag = TestUtils.scryRenderedDOMComponentsWithTag;
@@ -15,16 +17,18 @@ var findByClass = TestUtils.scryRenderedDOMComponentsWithClass;
 
-	var images = [
-		{url: "http://placehold.it/150x150"},
-		{url: "http://placehold.it/149x149"},
-		{url: "http://placehold.it/148x148"},
-		{url: "http://placehold.it/147x147"},
-		{url: "http://placehold.it/146x146"},
-		{url: "http://placehold.it/147x147"},
-		{url: "http://placehold.it/146x146"}
-	];
+	function renderComponent (props) {
+		componentInstance = TestUtils.renderIntoDocument(
+	  		React.createElement(Carousel, React.__spread({},  props, {showArrows: true}), 
+	  			React.createElement("img", {src: "assets/1.jpeg"}), 
+				React.createElement("img", {src: "assets/2.jpeg"}), 
+				React.createElement("img", {src: "assets/3.jpeg"}), 
+				React.createElement("img", {src: "assets/4.jpeg"}), 
+				React.createElement("img", {src: "assets/5.jpeg"}), 
+				React.createElement("img", {src: "assets/6.jpeg"}), 
+				React.createElement("img", {src: "assets/7.jpeg"})
+	  		)
+	  	);
+	}
 
 	beforeEach(function () {
-		componentInstance = TestUtils.renderIntoDocument(
-	  		React.createElement(Carousel, {items: images })
-	  	);
+		renderComponent({});
 	});
@@ -35,3 +39,3 @@
 	      // Only components with a parent will be unmounted
-	      React.unmountComponentAtNode(componentInstance.getDOMNode());
+	      ReactDOM.unmountComponentAtNode(document);
 	    }
@@ -57,12 +61,13 @@ });
 		it("Should set the selectedItem from the props", function () {
-			componentInstance.setProps({selectedItem: 3});
+			renderComponent({selectedItem: 3});
 			expect(componentInstance.state.selectedItem).toBe(3);
+			expect(componentInstance.state.firstItem).toBe(3);
 		});
 
 		it("Should update the position of the carousel if selectedItem is changed", function () {
-			componentInstance.setProps({selectedItem: 2});
+			TestUtils.Simulate.click(componentInstance.refs['itemImg2']);
 			expect(componentInstance.state.selectedItem).toBe(2);
-			expect(componentInstance.state.firstItem).toBe(2);
+			// expect(componentInstance.state.firstItem).toBe(2);
 
-			componentInstance.setProps({selectedItem: 3});
+			TestUtils.Simulate.click(componentInstance.refs['itemImg3']);
 			expect(componentInstance.state.selectedItem).toBe(3);
@@ -74,11 +79,11 @@ expect(componentInstance.state.firstItem).toBe(3);
 		it("Should limit the position of the carousel firstItem to the `lastPosition`", function () {
-			componentInstance.setProps({selectedItem: 2});
+			TestUtils.Simulate.click(componentInstance.refs['itemImg2']);
 			expect(componentInstance.state.selectedItem).toBe(2);
 			expect(componentInstance.state.firstItem).toBe(2);
 
-			componentInstance.setProps({selectedItem: 5});
+			TestUtils.Simulate.click(componentInstance.refs['itemImg5']);
 			expect(componentInstance.state.selectedItem).toBe(5);
 			expect(componentInstance.state.firstItem).toBe(3);
 
-			componentInstance.setProps({selectedItem: 6});
+			TestUtils.Simulate.click(componentInstance.refs['itemImg6']);
 			expect(componentInstance.state.selectedItem).toBe(6);
@@ -93,6 +98,6 @@ expect(componentInstance.state.firstItem).toBe(3);
 			
-			TestUtils.Simulate.click(findByTag(componentInstance, 'li')[1].getDOMNode());
+			TestUtils.Simulate.click(componentInstance.refs['itemImg1']);
 			expect(componentInstance.state.selectedItem).toBe(1);
 
-			TestUtils.Simulate.click(findByTag(componentInstance, 'li')[3].getDOMNode());
+			TestUtils.Simulate.click(componentInstance.refs['itemImg3']);
 			expect(componentInstance.state.selectedItem).toBe(3);
@@ -104,8 +109,6 @@ });
 			
-			componentInstance.setProps({onSelectItem: mockedFunction});
+			renderComponent({onSelectItem: mockedFunction});
 
-			TestUtils.Simulate.click(findByTag(componentInstance, 'li')[1].getDOMNode());
+			TestUtils.Simulate.click(componentInstance.refs['itemImg1']);
 			expect(mockedFunction).toBeCalled();
-			expect(mockedFunction).lastCalledWith(1, {url: "http://placehold.it/149x149"});		
-
 		})
@@ -124,3 +127,3 @@ })
 
-			componentInstance.setProps({selectedItem: 2});
+			TestUtils.Simulate.click(componentInstance.refs['itemImg2']);
 			expect(findByClass(componentInstance, 'control-arrow control-left control-disabled').length).toBe(0);	
@@ -138,3 +141,3 @@ });
 		it("Should disable the left arrow if we are showing the first item", function () {
-			componentInstance.setProps({selectedItem: 0});
+			TestUtils.Simulate.click(componentInstance.refs['itemImg0']);
 			expect(findByClass(componentInstance, 'control-arrow control-left control-disabled').length).toBe(1);
@@ -144,3 +147,3 @@ });
 		it("Should enable the left arrow if we are showing other than the first item", function () {
-			componentInstance.setProps({selectedItem: 1});
+			TestUtils.Simulate.click(componentInstance.refs['itemImg1']);
 			expect(findByClass(componentInstance, 'control-arrow control-left control-disabled').length).toBe(0);
@@ -150,6 +153,6 @@ });
 		it("Should disable the right arrow if we reach the lastPosition", function () {
-			componentInstance.setProps({selectedItem: 1});
+			TestUtils.Simulate.click(componentInstance.refs['itemImg1']);
 			expect(findByClass(componentInstance, 'control-arrow control-right control-disabled').length).toBe(0);
 			
-			componentInstance.setProps({selectedItem: 4});
+			TestUtils.Simulate.click(componentInstance.refs['itemImg4']);
 			expect(findByClass(componentInstance, 'control-arrow control-right control-disabled').length).toBe(1);
@@ -160,5 +163,5 @@ });
 			componentInstance.visibleItems = 10;
-			componentInstance.setProps({selectedItem: 0});
-			// expect(findByClass(componentInstance, 'control-arrow control-left control-disabled').length).toBe(1);
-			// expect(findByClass(componentInstance, 'control-arrow control-right control-disabled').length).toBe(1);
+			TestUtils.Simulate.click(componentInstance.refs['itemImg0']);
+			expect(findByClass(componentInstance, 'control-arrow control-left control-disabled').length).toBe(1);
+			expect(findByClass(componentInstance, 'control-arrow control-right control-disabled').length).toBe(1);
 		})
@@ -165,0 +168,0 @@ })

__tests__/ImageGallery.js

@@ -5,4 +5,6 @@ /** @jsx React.DOM */
 	
-	var React = require('react/addons');
-	var TestUtils = React.addons.TestUtils;
+	var React = require('react');
+	var TestUtils = require('react-addons-test-utils');
+	var ReactDOM = require('react-dom');
+
 	var findByTag = TestUtils.scryRenderedDOMComponentsWithTag;
@@ -20,9 +22,11 @@ var findByClass = TestUtils.scryRenderedDOMComponentsWithClass;
 		componentInstance = TestUtils.renderIntoDocument(
-	  		React.createElement(ImageGallery, {images: [
-					{url: "http://placehold.it/150x150"},
-					{url: "http://placehold.it/149x149"},
-					{url: "http://placehold.it/148x148"},
-					{url: "http://placehold.it/147x147"},
-					{url: "http://placehold.it/146x146"}
-			]})
+	  		React.createElement(ImageGallery, null, 
+	  			React.createElement("img", {src: "assets/1.jpeg"}), 
+				React.createElement("img", {src: "assets/2.jpeg"}), 
+				React.createElement("img", {src: "assets/3.jpeg"}), 
+				React.createElement("img", {src: "assets/4.jpeg"}), 
+				React.createElement("img", {src: "assets/5.jpeg"}), 
+				React.createElement("img", {src: "assets/6.jpeg"}), 
+				React.createElement("img", {src: "assets/7.jpeg"})
+	  		)
 	  	);
@@ -34,10 +38,10 @@ });
 	      // Only components with a parent will be unmounted
-	      React.unmountComponentAtNode(componentInstance.getDOMNode());
+	      ReactDOM.unmountComponentAtNode(document);
 	    }
   	});
 
-	it("Should have a state currentImage", function () {
-		expect(componentInstance.state.currentImage).toBeDefined();
+	it("Should have a state selectedItem", function () {
+		expect(componentInstance.state.selectedItem).toBeDefined();
 	});
 });
 

components/Carousel.js

@@ -1,2 +0,2 @@
-var React = require('react/addons');
+var React = require('react');
 var klass = require('../cssClasses');
@@ -9,3 +9,8 @@ var outerWidth = require('../dimensions').outerWidth;
 	propsTypes: {
-		items: React.PropTypes.array.isRequired
+		children: React.PropTypes.element.isRequired,
+		showStatus: React.PropTypes.bool,
+		showControls: React.PropTypes.bool,
+		selectedItem: React.PropTypes.number,
+		firstItem: React.PropTypes.number,
+		type: React.PropTypes.oneOf(['carousel', 'slider'])
 	},
@@ -15,2 +20,4 @@
 		return {
+			showStatus: false,
+			showControls: false,
 			selectedItem: 0,
@@ -32,3 +39,3 @@ // Carousel is the default type. It stands for a group of thumbs.
 			// the same value of the selected item.
-			firstItem: 0
+			firstItem: this.props.selectedItem
 		}
@@ -38,4 +45,2 @@ },
 	statics: {
-		// current position is needed to calculate the right delta
-		currentPosition: 0,
 		// touchPosition is a temporary var to decide what to do on touchEnd
@@ -61,15 +66,5 @@ touchPosition: null
 		if (props.selectedItem !== this.state.selectedItem) {
-			var firstItem = props.selectedItem;
-			
-			if (props.selectedItem >= this.lastPosition) {
-				firstItem =  this.lastPosition;
-			} 
-
-			if (!this.showArrows) {
-				firstItem = 0;
-			}
-
 			this.setState({
 				selectedItem: props.selectedItem,
-				firstItem: firstItem
+				firstItem: this.getFirstItem(props.selectedItem)
 			});
@@ -84,11 +79,5 @@ }
 
-		// adding swipe events
-		var el = this.refs.itemList.getDOMNode();
-		el.addEventListener('touchstart', this.onSwipeStart);
-		el.addEventListener('touchmove', this.onSwipeMove);
-		el.addEventListener('touchend', this.onSwipeEnd);
-
 		if (!this.isSlider) {
 			var defaultImgIndex = 0;
-			var defaultImg = this.refs['itemImg' + defaultImgIndex].getDOMNode();
+			var defaultImg = this.refs['itemImg' + defaultImgIndex];
 			defaultImg.addEventListener('load', this.setMountState);
@@ -103,3 +92,3 @@ }
 	updateDimensions:function () {
-		this.calculateSpace(this.props.items.length);
+		this.calculateSpace(this.props.children.length);
 		// the component should be rerended after calculating space
@@ -111,12 +100,9 @@ this.forceUpdate();
 	calculateSpace:function (total) {
-		total = total || this.props.items.length;
+		total = total || this.props.children.length;
 		this.isSlider = this.props.type === "slider";
 		
-		this.wrapperSize = this.refs.itemsWrapper.getDOMNode().clientWidth;
-		this.itemSize = this.isSlider ? this.wrapperSize : outerWidth(this.refs.item0.getDOMNode());
+		this.wrapperSize = this.refs.itemsWrapper.clientWidth;
+		this.itemSize = this.isSlider ? this.wrapperSize : outerWidth(this.refs.item0);
 		this.visibleItems = Math.floor(this.wrapperSize / this.itemSize);	
 		
-		this.lastElement = this.refs['item' + (total - 1)];
-		this.lastElementPosition = this.itemSize * total;
-		
 		// exposing variables to other methods on this component
@@ -129,2 +115,16 @@ this.showArrows = this.visibleItems < total;
 
+	getFirstItem:function (selectedItem) {
+		var firstItem = selectedItem;
+		
+		if (selectedItem >= this.lastPosition) {
+			firstItem =  this.lastPosition;
+		}
+
+		if (!this.showArrows) {
+			firstItem = 0;
+		}
+
+		return firstItem;
+	},
+
 	handleClickItem:function (index, item) {
@@ -139,3 +139,4 @@ var handler = this.props.onSelectItem;
 			this.setState({
-				selectedItem: index
+				selectedItem: index,
+				firstItem: this.getFirstItem(index)
 			});
@@ -167,32 +168,48 @@ }
         var leftBoundry = 0;
-        var lastLeftBoundry = - this.itemSize * (this.props.items.length - 1);
 
+        var currentPosition;
+        var lastLeftBoundry;
+
+        if (this.isSlider) {
+			currentPosition = - this.state.firstItem * 100;	
+			lastLeftBoundry = - (this.props.children.length - 1) * 100;
+		} else {
+			currentPosition = - this.state.firstItem * this.itemSize;	
+			lastLeftBoundry = - this.visibleItems * this.itemSize;
+		}
+
         //if the first image meets the left boundry, prevent user from swiping left
-        if (this.currentPosition === leftBoundry && delta > 0) {
+        if (currentPosition === leftBoundry && delta > 0) {
             delta = 0;
         }
+        
         //if the last image meets the left boundry, prevent user from swiping right
-        if (this.currentPosition === lastLeftBoundry && delta < 0) {
+        if (currentPosition === lastLeftBoundry && delta < 0) {
             delta = 0;
         }
-		// real position
-		var position = this.currentPosition + delta;
+
+        var position;
+
+        if (this.isSlider) {
+    		position = currentPosition + (100 / (this.wrapperSize / delta)) + '%';
+        } else {
+        	position = currentPosition + delta + 'px';
+        }
+
 		// adding it to the last position and saving the position
 		this.touchPosition = delta;
 
-		var elementStyle = this.refs.itemList.getDOMNode().style;
+		var elementStyle = this.refs.itemList.style;
 
 		// if 3d isn't available we will use left to move
-		if (has3d) {
-			[
-				'WebkitTransform',
-				'MozTransform',
-				'MsTransform',
-				'OTransform',
-				'transform',
-				'msTransform'
-			].forEach(function(prop)  {return elementStyle[prop] = 'translate3d(' + position + 'px, 0, 0)';});
-		} else {
-			elementStyle.left = position + 'px';
-		}
+		[
+			'WebkitTransform',
+			'MozTransform',
+			'MsTransform',
+			'OTransform',
+			'transform',
+			'msTransform'
+		].forEach(function(prop)  {
+			elementStyle[prop] = has3d ? 'translate3d(' + position + ', 0, 0)' : 'translate(' + position + ', 0)';
+		});
 	},
@@ -211,2 +228,5 @@
 			function () {
+				// number of positions to advance;
+				var positions;
+
                 if (this.touchPosition === 0) {
@@ -218,7 +238,12 @@ /* prevent users from swipe right on the first image
                     */
-                } else if (this.touchPosition < 0) {
+                } else {
+                	// if it's a slider, positions is 1
+					positions = !this.isSlider ? Math.abs(Math.round(this.touchPosition / this.itemSize)) : 1;                	
+                } 
+
+                if (this.touchPosition < 0) {
                     // less than 0 means that it's going left
-                    this.slideLeft();
+                    this.slideLeft(positions);
                 } else if (this.touchPosition > 0) {
-                    this.slideRight();
+                    this.slideRight(positions);
                 }
@@ -231,8 +256,8 @@ // discard the position
 
-	slideRight:function (){
-		this.moveTo(this.state.firstItem - 1)
+	slideRight:function (positions){
+		this.moveTo(this.state.firstItem - (typeof positions === 'Number' ? positions : 1));
 	},
 
-	slideLeft:function (){
-		this.moveTo(this.state.firstItem + 1)
+	slideLeft:function (positions){
+		this.moveTo(this.state.firstItem + (typeof positions === 'Number' ? positions : 1));
 	},
@@ -243,3 +268,2 @@
 		position = position < 0 ? 0 : position;
-
 		// position can't be higher than last postion
@@ -249,3 +273,3 @@ position = position >= this.lastPosition ? this.lastPosition : position;
 		this.setState({
-			firstItem: position,
+			firstItem: this.getFirstItem(position),
 			// if it's not a slider, we don't need to set position here
@@ -258,16 +282,8 @@ selectedItem: this.isSlider ? position : this.state.selectedItem
 
-
-	getTotalWidth:function () {
-		return this.itemSize * this.props.items.length || 'auto';
-	},
-
-	getNextPosition:function () {
-		return - this.itemSize * this.state.firstItem || 0;
-	},
-
 	changeItem:function (e) {
 		var newIndex = e.target.value;
+
 		this.setState({
 			selectedItem: newIndex,
-			firstItem: newIndex
+			firstItem: this.getFirstItem(newIndex)
 		})
@@ -279,12 +295,10 @@ },
 
-		return this.props.items.map(function(item, index)  {
+		return this.props.children.map(function(item, index)  {
             var hasMount = this.state.hasMount;
 			var itemClass = klass.ITEM(this.isSlider, index, this.state.selectedItem, hasMount);
-			var imageSchema = {};
 			
 			return (
 				React.createElement("li", {key: index, ref: "item" + index, className: itemClass, 
-					style: {width: this.isSlider && this.itemSize}, 
 					onClick:  this.handleClickItem.bind(this, index, item) }, 
-					React.createElement("img", {src: item.url, ref: "itemImg" + index})
+					React.createElement("img", {src: item.props.src, ref: "itemImg" + index})
 				)
@@ -303,3 +317,3 @@ );
 			React.createElement("ul", {className: "control-dots"}, 
-				this.props.items.map( function(item, index)  {
+				this.props.children.map( function(item, index)  {
 					return React.createElement("li", {className: klass.DOT(index === this.state.selectedItem), onClick: this.changeItem, value: index, key: index});
@@ -315,7 +329,7 @@ }.bind(this))
 		}
-		return React.createElement("p", {className: "carousel-status"}, this.state.selectedItem + 1, " of ", this.props.items.length);
+		return React.createElement("p", {className: "carousel-status"}, this.state.selectedItem + 1, " of ", this.props.children.length);
 	}, 
 
 	render:function () {
-		if (this.props.items.length === 0) {
+		if (this.props.children.length === 0) {
 			return null;
@@ -330,25 +344,21 @@ }
 		var itemListStyles = {};
-		
-		// hold the last position in the component context to calculate the delta on swiping
-		this.currentPosition = this.getNextPosition();
 
-		if (has3d) {
-			// if 3d is available, let's take advantage of the performance of transform
-			var transformProp = 'translate3d(' + this.currentPosition + 'px, 0, 0)';
-			itemListStyles = {
-				'WebkitTransform': transformProp,
-				   'MozTransform': transformProp,
-				    'MsTransform': transformProp,
-				     'OTransform': transformProp,
-				      'transform': transformProp,
-				    'msTransform': transformProp,
-				    	  'width': this.lastElementPosition
-			}
+		var currentPosition;
+
+		if (this.isSlider) {
+			currentPosition = - this.state.firstItem * 100 + '%';	
 		} else {
-			// if 3d isn't available we will use left to move
-			itemListStyles = {
-				left: this.currentPosition,
-				width: this.lastElementPosition
-			}
+			currentPosition = - this.state.firstItem * this.itemSize + 'px';	
 		}
+
+		// if 3d is available, let's take advantage of the performance of transform
+		var transformProp = has3d ? 'translate3d(' + currentPosition + ', 0, 0)' : 'translate(' + currentPosition + ', 0)';
+		itemListStyles = {
+			'WebkitTransform': transformProp,
+			   'MozTransform': transformProp,
+			    'MsTransform': transformProp,
+			     'OTransform': transformProp,
+			      'transform': transformProp,
+			    'msTransform': transformProp
+		}
 		
@@ -360,3 +370,8 @@ return (
 				React.createElement("div", {className: klass.WRAPPER(this.isSlider), ref: "itemsWrapper"}, 
-					React.createElement("ul", {className: klass.SLIDER(this.isSlider, this.state.swiping), style: itemListStyles, ref: "itemList"}, 
+					React.createElement("ul", {className: klass.SLIDER(this.isSlider, this.state.swiping), 
+						onTouchMove: this.onSwipeMove, 
+						onTouchStart: this.onSwipeStart, 
+						onTouchEnd: this.onSwipeEnd, 
+						style: itemListStyles, 
+						ref: "itemList"}, 
 						 this.renderItems() 
@@ -363,0 +378,0 @@ )

components/ImageGallery.js

@@ -1,3 +0,2 @@
-/** @jsx React.DOM */
-var React = require('react/addons');
+var React = require('react');
 var Carousel = require('./Carousel');
@@ -8,8 +7,18 @@
 	propsTypes: {
-		images: React.PropTypes.array.isRequired
+		children: React.PropTypes.element.isRequired,
+		showStatus: React.PropTypes.bool,
+		showControls: React.PropTypes.bool,
+		selectedItem: React.PropTypes.number,
+		type: React.PropTypes.oneOf(['carousel', 'slider'])
 	},
 
+	getDefaultProps:function () {
+		return {
+			selectedItem: 0
+		}
+	},
+
 	getInitialState:function () {
 		return {
-			currentImage: 0
+			selectedItem: this.props.selectedItem
 		}
@@ -20,3 +29,3 @@ },
 		this.setState({
-			currentImage: selectedItem
+			selectedItem: selectedItem
 		});
@@ -26,14 +35,13 @@ },
 	render:function () {
-		var $__0=    this.props,images=$__0.images;
-		var $__1=    this.state,current=$__1.current;
-		var mainImage = (images && images[current] && images[current].url);
-
 		return (
 			React.createElement("div", {className: "image-gallery"}, 
-				React.createElement(Carousel, {type: "slider", items: images, selectedItem: this.state.currentImage, onChange: this.selectItem, onSelectItem:  this.selectItem}), 
-				React.createElement(Carousel, {items: images, selectedItem: this.state.currentImage, onSelectItem:  this.selectItem})
+				React.createElement(Carousel, {type: "slider", selectedItem: this.state.selectedItem, showControls: this.props.showControls, showStatus: this.props.showStatus, onChange: this.selectItem, onSelectItem:  this.selectItem}, 
+					 this.props.children
+				), 
+				React.createElement(Carousel, {selectedItem: this.state.selectedItem, onSelectItem:  this.selectItem}, 
+					 this.props.children
+				)
 			)
 		);
 	}
-});
-
+});

main.js

 var React = require('react');
-window.React = React;
-var ImageGallery = require('./components/ImageGallery');
-var Carousel = require('./components/Carousel');
+var ReactDOM = require('react-dom');
+var ImageGallery = require('react-responsive-carousel').ImageGallery;
+var Carousel = require('react-responsive-carousel').Carousel;
 
-var galleryImages = [
-	{url: "http://lorempixel.com/700/250/sports/1"},
-	{url: "http://lorempixel.com/700/250/sports/2"},
-	{url: "http://lorempixel.com/700/250/sports/3"},
-	{url: "http://lorempixel.com/700/250/sports/4"},
-	{url: "http://lorempixel.com/700/250/sports/5"},
-	{url: "http://lorempixel.com/700/250/sports/6"},
-	{url: "http://lorempixel.com/700/250/sports/7"}
-];
+// Begin DemoSliderControls
+var DemoSliderControls = function() {
+	return (
+		React.createElement(Carousel, {type: "slider", showControls: true, showStatus: true}, 
+			React.createElement("img", {src: "assets/1.jpeg"}), 
+			React.createElement("img", {src: "assets/2.jpeg"}), 
+			React.createElement("img", {src: "assets/3.jpeg"}), 
+			React.createElement("img", {src: "assets/4.jpeg"}), 
+			React.createElement("img", {src: "assets/5.jpeg"}), 
+			React.createElement("img", {src: "assets/6.jpeg"}), 
+			React.createElement("img", {src: "assets/7.jpeg"})
+		)
+	);
+};
 
-var sliderImages = [
-	{url: "http://lorempixel.com/960/400/nature/1"},
-	{url: "http://lorempixel.com/960/400/nature/2"},
-	{url: "http://lorempixel.com/960/400/nature/3"},
-	{url: "http://lorempixel.com/960/400/nature/4"},
-	{url: "http://lorempixel.com/960/400/nature/5"},
-	{url: "http://lorempixel.com/960/400/nature/6"},
-	{url: "http://lorempixel.com/960/400/nature/7"}
-];
+ReactDOM.render(React.createElement(DemoSliderControls, null), document.querySelector('.demo-slider-controls'));
+// End DemoSliderControls
 
-var carouselImages = [
-	{url: "http://lorempixel.com/70/70/animals/1"},
-	{url: "http://lorempixel.com/70/70/animals/2"},
-	{url: "http://lorempixel.com/70/70/animals/3"},
-	{url: "http://lorempixel.com/70/70/animals/4"},
-	{url: "http://lorempixel.com/70/70/animals/5"},
-	{url: "http://lorempixel.com/70/70/animals/6"},
-	{url: "http://lorempixel.com/70/70/animals/7"},
-	{url: "http://lorempixel.com/70/70/animals/8"},
-	{url: "http://lorempixel.com/70/70/animals/9"},
-	{url: "http://lorempixel.com/70/70/animals/10"},
-	{url: "http://lorempixel.com/70/70/animals/11"},
-	{url: "http://lorempixel.com/70/70/animals/12"},
-	{url: "http://lorempixel.com/70/70/animals/13"},
-	{url: "http://lorempixel.com/70/70/animals/14"},
-	{url: "http://lorempixel.com/70/70/animals/15"},
-	{url: "http://lorempixel.com/70/70/animals/16"},
-	{url: "http://lorempixel.com/70/70/animals/17"},
-	{url: "http://lorempixel.com/70/70/animals/18"},
-	{url: "http://lorempixel.com/70/70/animals/19"},
-	{url: "http://lorempixel.com/70/70/animals/20"}
+// Begin DemoGallery
+var DemoGallery = function() {
+	return (
+		React.createElement(ImageGallery, {showControls: true, showStatus: true}, 
+			React.createElement("img", {src: "assets/1.jpeg"}), 
+			React.createElement("img", {src: "assets/2.jpeg"}), 
+			React.createElement("img", {src: "assets/3.jpeg"}), 
+			React.createElement("img", {src: "assets/4.jpeg"}), 
+			React.createElement("img", {src: "assets/5.jpeg"}), 
+			React.createElement("img", {src: "assets/6.jpeg"}), 
+			React.createElement("img", {src: "assets/7.jpeg"}), 
+			React.createElement("img", {src: "assets/1.jpeg"}), 
+			React.createElement("img", {src: "assets/2.jpeg"}), 
+			React.createElement("img", {src: "assets/3.jpeg"}), 
+			React.createElement("img", {src: "assets/4.jpeg"}), 
+			React.createElement("img", {src: "assets/5.jpeg"}), 
+			React.createElement("img", {src: "assets/6.jpeg"}), 
+			React.createElement("img", {src: "assets/7.jpeg"}), 
+			React.createElement("img", {src: "assets/1.jpeg"}), 
+			React.createElement("img", {src: "assets/2.jpeg"}), 
+			React.createElement("img", {src: "assets/3.jpeg"}), 
+			React.createElement("img", {src: "assets/4.jpeg"}), 
+			React.createElement("img", {src: "assets/5.jpeg"}), 
+			React.createElement("img", {src: "assets/6.jpeg"}), 
+			React.createElement("img", {src: "assets/7.jpeg"}), 
+			React.createElement("img", {src: "assets/1.jpeg"}), 
+			React.createElement("img", {src: "assets/2.jpeg"}), 
+			React.createElement("img", {src: "assets/3.jpeg"}), 
+			React.createElement("img", {src: "assets/4.jpeg"}), 
+			React.createElement("img", {src: "assets/5.jpeg"}), 
+			React.createElement("img", {src: "assets/6.jpeg"}), 
+			React.createElement("img", {src: "assets/7.jpeg"})
+		)
+	);
+};
 
-];
+ReactDOM.render(React.createElement(DemoGallery, null), document.querySelector('.demo-gallery'));
+// End DemoGallery
 
-var DemoGallery = React.createClass({displayName: "DemoGallery",
-	render:function() {
-		return (
-			React.createElement("div", {className: "demo-image-gallery"}, 
-				React.createElement(ImageGallery, {images: galleryImages })
-			)
-		);
-	}
-});
+// Begin DemoCarousel
+var DemoCarousel = function() {
+	return (
+		React.createElement(Carousel, null, 
+			React.createElement("img", {src: "assets/1.jpeg"}), 
+			React.createElement("img", {src: "assets/2.jpeg"}), 
+			React.createElement("img", {src: "assets/3.jpeg"}), 
+			React.createElement("img", {src: "assets/4.jpeg"}), 
+			React.createElement("img", {src: "assets/5.jpeg"}), 
+			React.createElement("img", {src: "assets/6.jpeg"}), 
+			React.createElement("img", {src: "assets/7.jpeg"}), 
+			React.createElement("img", {src: "assets/1.jpeg"}), 
+			React.createElement("img", {src: "assets/2.jpeg"}), 
+			React.createElement("img", {src: "assets/3.jpeg"}), 
+			React.createElement("img", {src: "assets/4.jpeg"}), 
+			React.createElement("img", {src: "assets/5.jpeg"}), 
+			React.createElement("img", {src: "assets/6.jpeg"}), 
+			React.createElement("img", {src: "assets/7.jpeg"}), 
+			React.createElement("img", {src: "assets/1.jpeg"}), 
+			React.createElement("img", {src: "assets/2.jpeg"}), 
+			React.createElement("img", {src: "assets/3.jpeg"}), 
+			React.createElement("img", {src: "assets/4.jpeg"}), 
+			React.createElement("img", {src: "assets/5.jpeg"}), 
+			React.createElement("img", {src: "assets/6.jpeg"}), 
+			React.createElement("img", {src: "assets/7.jpeg"}), 
+			React.createElement("img", {src: "assets/1.jpeg"}), 
+			React.createElement("img", {src: "assets/2.jpeg"}), 
+			React.createElement("img", {src: "assets/3.jpeg"}), 
+			React.createElement("img", {src: "assets/4.jpeg"}), 
+			React.createElement("img", {src: "assets/5.jpeg"}), 
+			React.createElement("img", {src: "assets/6.jpeg"}), 
+			React.createElement("img", {src: "assets/7.jpeg"})
+		)
+	);
+};
 
-var DemoSliderControls = React.createClass({displayName: "DemoSliderControls",
-	render:function() {
-		return (
-			React.createElement("div", {className: "demo-slider"}, 
-				React.createElement(Carousel, {type: "slider", items: sliderImages, showControls: true, showStatus: true})
-			)
-		);
-	}
-});
-
-var DemoCarousel = React.createClass({displayName: "DemoCarousel",
-	render:function() {
-		return (
-			React.createElement("div", {className: "demo-carousel"}, 
-				React.createElement(Carousel, {items: carouselImages })
-			)
-		);
-	}
-});
-
-React.render(React.createElement(DemoGallery, null), document.querySelector('.demo-gallery'));
-React.render(React.createElement(DemoSliderControls, null), document.querySelector('.demo-slider-controls'));
-React.render(React.createElement(DemoCarousel, null), document.querySelector('.demo-carousel'));
-
+ReactDOM.render(React.createElement(DemoCarousel, null), document.querySelector('.demo-carousel'));
+// End DemoCarousel

package.json

 {
   "name": "react-responsive-carousel",
-  "version": "0.1.6",
+  "version": "2.0.0",
   "description": "React Responsive Carousel",
@@ -33,6 +33,3 @@ "author": {
     "classnames": "^2.1.1"
-  },
-  "devDependencies": {
-    "react": "^0.13.3"
   }
 }

README.md

@@ -1,74 +0,50 @@
-# React Responsive Carousel (WIP)
+# React Responsive Carousel (React 0.14)
 
-* Note: This version `0.1.1` was updated for use with React `0.13.3`. For React < `0.13.0` try the version `0.1.0`;
+## Demos and docs:
+[http://leandrowd.github.io/react-responsive-carousel/](http://leandrowd.github.io/react-responsive-carousel/)
 
-## Demo
+* Note: If you need support for IE8 or older versions of React, install version 0.1.6
 
-http://leandrowd.github.io/react-responsive-carousel/
-
-
 ## Installing as a package
-
 `npm install react-responsive-carousel --save`
 
+## Getting started
+- Possible properties: 
+	- (Array) items
+	- (Boolean) showControls
+	- (Boolean) showStatus
+	- (Function) onChange
+		- Triggered when the carousel move
+	- (Function) onSelectItem
+		- Triggered when an item is selected
 
-## Running locally
+- Usage: 
 
-To run it on your local environment just: 
-
-- `git clone [e-mail]:leandrowd/react-responsive-carousel.git`
-- `npm install`
-- `gulp`
-- Open your favourite browser on `localhost:8000`
-
-To generate the npm package run `gulp package`. It will transpile the jsx to js and copy the css into the lib folder.
-
-
-## Contributing
-
-Please, feel free to contributing. You may file an issue or submit a pull request!
-
-
-## Getting started
-
 ### Slider with controls
 
-- Javascript / Jsx:
-
 ```javascript
-/** @jsx React.DOM */
 var React = require('react');
-var Carousel = require('./components/Carousel');
+var ReactDOM = require('react-dom');
+var Carousel = require('react-responsive-carousel').Carousel;
 
-var DemoSliderControls = React.createClass({
-	render() {
-		return (
-			<div className="demo-slider">
-				<Carousel 
-					type="slider" 
-					items={ sliderImages } 
-					showControls={true} 
-					showStatus={true} />
-			</div>
-		);
-	}
-});
+var DemoSliderControls = function(){
+	return (
+		<Carousel type="slider" showControls={true} showStatus={true}>
+			<img src="assets/1.jpeg" />
+			<img src="assets/2.jpeg" />
+			<img src="assets/3.jpeg" />
+			<img src="assets/4.jpeg" />
+			<img src="assets/5.jpeg" />
+			<img src="assets/6.jpeg" />
+			<img src="assets/7.jpeg" />
+		</Carousel>
+	);
+};
 
-React.render(<DemoSliderControls />, document.querySelector('.demo-slider-controls'));
-```
+ReactDOM.render(<DemoSliderControls />, document.querySelector('.demo-slider-controls'));
 
-- Css:
-
-```css
-<link rel="stylesheet" href="carousel.css"/>
+// Don't forget to include the css in your page 
+// <link rel="stylesheet" href="carousel.css"/>
 ```
 
-- Props: 
-	- (Array) items
-	- (Boolean) showControls
-	- (Boolean) showStatus
-	- (Function) onChange
-		- Triggered when the carousel move
-	- (Function) onSelectItem
-		- Triggered when an item is selected
 
@@ -78,27 +54,25 @@
 
-- Javascript / Jsx:
-
 ```javascript
-/** @jsx React.DOM */
 var React = require('react');
-var Carousel = require('./components/Carousel');
+var ReactDOM = require('react-dom');
+var ImageGallery = require('react-responsive-carousel').ImageGallery;
 
-var DemoCarousel = React.createClass({
-	render() {
-		return (
-			<div className="demo-carousel">
-				<Carousel items={ carouselImages } />
-			</div>
-		);
-	}
-});
+var DemoGallery = function() {
+	return (
+		<ImageGallery showControls={true} showStatus={true}>
+			<img src="assets/1.jpeg" />
+			<img src="assets/2.jpeg" />
+			<img src="assets/3.jpeg" />
+			<img src="assets/4.jpeg" />
+			<img src="assets/5.jpeg" />
+			<img src="assets/6.jpeg" />
+		</ImageGallery>
+	);
+};
 
-React.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
-```
+ReactDOM.render(<DemoGallery />, document.querySelector('.demo-gallery'));
 
-
-- Css:
-
-```css
-<link rel="stylesheet" href="carousel.css"/>
+// Don't forget to include the css in your page
+// <link rel="stylesheet" href="imageGallery.css"/>
+// <link rel="stylesheet" href="carousel.css"/>
 ```
@@ -116,35 +90,29 @@
 
-
 ### Image Gallery
 
-- Javascript / Jsx:
 ```javascript
-/** @jsx React.DOM */
 var React = require('react');
-var ImageGallery = require('./components/ImageGallery');
+var ReactDOM = require('react-dom');
+var Carousel = require('react-responsive-carousel').Carousel;
 
-var DemoGallery = React.createClass({
-	render() {
-		return (
-			<div className="demo-image-gallery">
-				<ImageGallery images={ galleryImages } />
-			</div>
-		);
-	}
-});
+var DemoCarousel = function() {
+	return (
+		<Carousel>
+			<img src="assets/1.jpeg" />
+			<img src="assets/2.jpeg" />
+			<img src="assets/3.jpeg" />
+			<img src="assets/4.jpeg" />
+			<img src="assets/5.jpeg" />
+			<img src="assets/6.jpeg" />
+			<img src="assets/7.jpeg" />
+		</Carousel>
+	);
+};
 
-React.render(<DemoGallery />, document.querySelector('.demo-gallery'));
-```
+ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
 
-- Css:
-```css
-<link rel="stylesheet" href="imageGallery.css"/>
-<link rel="stylesheet" href="carousel.css"/>
+// Don't forget to include the css in your page
+// <link rel="stylesheet" href="carousel.css"/>
 ```
 
-- Props:
-	- images
-
-
-
 ### How to build your own gallery
@@ -157,4 +125,3 @@
 ```javascript
-/** @jsx React.DOM */
-var React = require('react/addons');
+var React = require('react');
 var Carousel = require('./Carousel');
@@ -164,4 +131,6 @@
 	
-	propsTypes: {
-		images: React.PropTypes.array.isRequired
+	getDefaultProps () {
+		return {
+			selectedItem: 0
+		}
 	},
@@ -171,3 +140,3 @@
 		return {
-			currentImage: 0
+			selectedItem: this.props.selectedItem
 		}
@@ -178,3 +147,3 @@ },
 		this.setState({
-			currentImage: selectedItem
+			selectedItem: selectedItem
 		});
@@ -184,19 +153,10 @@ },
 	render () {
-		var { images } = this.props;
-		var { current } = this.state;
-		var mainImage = (images && images[current] && images[current].url);
-
 		return (
 			<div className="image-gallery">
-				<Carousel 
-					type="slider" 
-					items={ images } 
-					selectedItem={this.state.currentImage} 
-					onChange={this.selectItem} 
-					onSelectItem={ this.selectItem } />
-
-				<Carousel 
-					items={ images } 
-					selectedItem={this.state.currentImage} 
-					onSelectItem={ this.selectItem } />
+				<Carousel type="slider" selectedItem={this.state.selectedItem} showControls={this.props.showControls} showStatus={this.props.showStatus} onChange={this.selectItem} onSelectItem={ this.selectItem }>
+					{ this.props.children }
+				</Carousel>
+				<Carousel selectedItem={this.state.selectedItem} onSelectItem={ this.selectItem }>
+					{ this.props.children }
+				</Carousel>
 			</div>
@@ -208,1 +168,13 @@ );
 
+## Running locally
+To run it on your local environment just: 
+
+- `git clone [e-mail]:leandrowd/react-responsive-carousel.git`
+- `npm install`
+- `gulp`
+- Open your favourite browser on `localhost:8000`
+
+To generate the npm package run `gulp package`. It will transpile the jsx to js and copy the css into the lib folder.
+
+## Contributing
+Please, feel free to contributing. You may file an issue or submit a pull request!

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

73771

increased by0.57%

Dev dependency count

0

decreased by-100%

Number of package files

22

increased by4.76%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Lines of code

1178

decreased by-1.83%

Number of lines in readme file

173

decreased by-13.93%

No dependency changes