react-responsive-carousel - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

__tests__/ImageGallery.js

@@ -5,4 +5,2 @@ /** @jsx React.DOM */
 	
-	jest.autoMockOff();
-	
 	var React = require('react/addons');
@@ -13,3 +11,4 @@ var TestUtils = React.addons.TestUtils;
 
-	// jest.dontMock('./ImageGallery.react');
+	jest.dontMock('../components/ImageGallery');
+	jest.dontMock('../components/Carousel');
 	
@@ -39,12 +38,10 @@ var ImageGallery = require('../components/ImageGallery');
 
-	// it("should be an instance of component", function(){
-	// 	// expect(TestUtils.isCompositeComponent(componentInstance)).toBe(true);
-	// });
+	it("should be an instance of component", function(){
+		expect(TestUtils.isCompositeComponent(componentInstance)).toBe(true);
+	});
 
 	it("Should have a state currentImage", function () {
-		// console.log(componentInstance.state);
-		// expect(componentInstance.state.currentImage).toBeDefined();
+		expect(componentInstance.state.currentImage).toBeDefined();
 	});
-	jest.autoMockOn();
 });
 

package.json

 {
   "name": "react-responsive-carousel",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "React Responsive Carousel",
@@ -34,5 +34,4 @@ "author": {
     "react-addons": "^0.9.0",
-    "react-tools": "^0.12.2",
     "ainojs-finger": "^1.1.2"
   }
 }

README.md

 # React Responsive Carousel (WIP)
 
-Demo: [http://leandrowd.github.io/react-responsive-carousel/](http://leandrowd.github.io/react-responsive-carousel/)
 
-## Installing
+## Demo
 
+http://leandrowd.github.io/react-responsive-carousel/
+
+
+## Installing as a package
+
 `npm install react-responsive-carousel --save`
 
-## Getting started
 
-### Image Gallery
+## Running locally
 
-- Javascript / Jsx:
-```javascript
-/** @jsx React.DOM */
-var React = require('react');
-var ImageGallery = require('react-responsive-carousel').ImageGallery;
+To run it on your local environment just: 
 
-var DemoGallery = React.createClass({
-	render() {
-		return (
-			<div className="demo-image-gallery">
-				<ImageGallery images={ galleryImages } />
-			</div>
-		);
-	}
-});
+- `git clone [e-mail]:leandrowd/react-responsive-carousel.git`
+- `npm install`
+- `gulp`
+- Open your favourite browser on `localhost:8000`
 
-React.render(<DemoGallery />, document.querySelector('.demo-gallery'));
-```
+To generate the npm package run `gulp package`. It will transpile the jsx to js and copy the css into the lib folder.
 
-- Css:
-```css
-<link rel="stylesheet" href="imageGallery.css"/>
-<link rel="stylesheet" href="carousel.css"/>
-```
 
-- Props:
-	- images
+## Getting started
 
@@ -48,3 +35,3 @@ ### Slider with controls
 var React = require('react');
-var Carousel = require('react-responsive-carousel').Carousel;
+var Carousel = require('./components/Carousel');
 
@@ -91,3 +78,3 @@ var DemoSliderControls = React.createClass({
 var React = require('react');
-var Carousel = require('react-responsive-carousel').Carousel;
+var Carousel = require('./components/Carousel');
 
@@ -123,2 +110,90 @@ var DemoCarousel = React.createClass({
 
+
+
+### Image Gallery
+
+- Javascript / Jsx:
+```javascript
+/** @jsx React.DOM */
+var React = require('react');
+var ImageGallery = require('./components/ImageGallery');
+
+var DemoGallery = React.createClass({
+	render() {
+		return (
+			<div className="demo-image-gallery">
+				<ImageGallery images={ galleryImages } />
+			</div>
+		);
+	}
+});
+
+React.render(<DemoGallery />, document.querySelector('.demo-gallery'));
+```
+
+- Css:
+```css
+<link rel="stylesheet" href="imageGallery.css"/>
+<link rel="stylesheet" href="carousel.css"/>
+```
+
+- Props:
+	- images
+
+
+
+### How to build your own gallery
+
+So simple, just add one carousel[type=slider]
+
+- Javascript / Jsx:
+
+```javascript
+/** @jsx React.DOM */
+var React = require('react/addons');
+var Carousel = require('./Carousel');
+
+module.exports = React.createClass({
+	
+	propsTypes: {
+		images: React.PropTypes.array.isRequired
+	},
+
+	getInitialState () {
+		return {
+			currentImage: 0
+		}
+	},
+
+	selectItem (selectedItem) {
+		this.setState({
+			currentImage: selectedItem
+		});
+	},
+
+	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 } />
+			</div>
+		);
+	}
+});
+```
+
+
 ### Browser Support
@@ -125,0 +200,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71943

increased by191.74%

Dependency count

3

decreased by-25%

Number of package files

21

increased by90.91%

Lines of code

1160

increased by98.29%

Number of lines in readme file

212

increased by54.74%

Dependency changes

• - Removedreact-tools@^0.12.2

• - Removedbase62@0.1.1(transitive)

• - Removedesprima-fb@8001.1001.0-dev-harmony-fb(transitive)

• - Removedjstransform@8.2.0(transitive)

• - Removedreact-tools@0.12.2(transitive)

• - Removedsource-map@0.1.31(transitive)