Updating npm package docs

leandrowd · Jan 7, 2016 · 76aa2e7 · 76aa2e7
1 parent 6637e47
commit 76aa2e7
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 146 deletions.
diff --git a/lib/README.md b/lib/README.md
@@ -1,172 +1,86 @@
-# React Responsive Carousel (React 0.14)
+# React Responsive Carousel
 
-## Demos and docs:
-[http://leandrowd.github.io/react-responsive-carousel/](http://leandrowd.github.io/react-responsive-carousel/)
+## Demo
+<http://leandrowd.github.io/react-responsive-carousel/>
 
-* Note: If you need support for IE8 or older versions of React, install version 0.1.6
 
 ## 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
+`npm install react-responsive-carousel --save`
 
-- Usage: 
 
-### Slider with controls
+## Contributing
 
-```javascript
-var React = require('react');
-var ReactDOM = require('react-dom');
-var Carousel = require('react-responsive-carousel').Carousel;
+Please, feel free to contributing. You may file an issue or submit a pull request!
 
-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>
-	);
-};
-
-ReactDOM.render(<DemoSliderControls />, document.querySelector('.demo-slider-controls'));
-
-// Don't forget to include the css in your page 
-// <link rel="stylesheet" href="carousel.css"/>
-```
 
+## Development
 
+To run it on your local environment just: 
 
-### Carousel
+- `git clone [email protected]:leandrowd/react-responsive-carousel.git`
+- `npm install`
+- `gulp`
+- Open your favourite browser on `localhost:8000`
 
-```javascript
-var React = require('react');
-var ReactDOM = require('react-dom');
-var ImageGallery = require('react-responsive-carousel').ImageGallery;
-
-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>
-	);
-};
-
-ReactDOM.render(<DemoGallery />, document.querySelector('.demo-gallery'));
-
-// Don't forget to include the css in your page
-// <link rel="stylesheet" href="imageGallery.css"/>
-// <link rel="stylesheet" href="carousel.css"/>
-```
+To generate the npm package run `gulp package`. It will transpile the jsx to js and copy the css into the lib folder.
 
-- Props: 
-	- (Array) items
-	- (Boolean) showControls
-	- (Boolean) showStatus
-	- (Function) onChange
-		- Triggered when the carousel move
-	- (Function) onSelectItem
-		- Triggered when an item is selected
 
+## Getting started
 
-### Image Gallery
+### Slider with controls
 
 ```javascript
 var React = require('react');
 var ReactDOM = require('react-dom');
 var Carousel = require('react-responsive-carousel').Carousel;
 
-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>
-	);
-};
-
+var DemoCarousel = React.createClass({
+    render() {
+        return (
+            <Carousel axis="horizontal|vertical" showThumbs={true|false} showArrows={true|false} onChange={onChange} onClickItem={onClickItem} onClickThumb={onClickThumb}>
+                <div>
+                    <img src="assets/1.jpeg" />
+                    <p className="legend">Legend 1</p>
+                </div>
+                <div>
+                    <img src="assets/2.jpeg" />
+                    <p className="legend">Legend 2</p>
+                </div>
+                <div>
+                    <img src="assets/3.jpeg" />
+                    <p className="legend">Legend 3</p>
+                </div>
+            </Carousel>
+        );
+    }
+});
 ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
 
-// Don't forget to include the css in your page
+// Don't forget to include the css in your page 
 // <link rel="stylesheet" href="carousel.css"/>
 ```
 
-### How to build your own gallery
-
-So simple, just add one carousel[type=slider] and another carousel sending the same parameters for both:
-
-- Javascript / Jsx:
-
-```javascript
-var React = require('react');
-var Carousel = require('./Carousel');
-
-module.exports = React.createClass({
-
-	getDefaultProps () {
-		return {
-			selectedItem: 0
-		}
-	},
-
-	getInitialState () {
-		return {
-			selectedItem: this.props.selectedItem
-		}
-	},
-
-	selectItem (selectedItem) {
-		this.setState({
-			selectedItem: selectedItem
-		});
-	},
-
-	render () {
-		return (
-			<div className="image-gallery">
-				<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>
-		);
-	}
-});
-```
-
-## Running locally
-To run it on your local environment just: 
-
-- `git clone [email protected]: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!
+## Properties
+
+- (Boolean) showArrows (default: true, options: true, false)
+- (Boolean) showStatus (default: true, options: true, false)
+- (Boolean) showIndicators (default: true, options: true, false)
+- (Boolean) showThumbs (default: true, options: true, false)
+- (Number) selectedItem (default: 0, options: any number between the first and the last index)
+- (String) axis (default: "horizontal" | options: "horizontal", "vertical")
+- (Function) onChange (Triggered when the carousel move)
+- (Function) onClickItem (Triggered when an item is clicked)
+- (Function) onClickThumb (Triggered when a thumb is clicked)
+
+
+## Last update:
+- Adding free children;
+- Adding vertical carousel;
+- Adding free legend;
+- Fixing problem with has3d being called before body was available;
+- Updating to use ref callbacks;
+- Renaming callbacks;
+- Extracting swiper component;
+- Extracting thumbs;
+- Improving styles;
diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-carousel",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "React Responsive Carousel",
   "author": {
     "name": "Leandro Augusto Lemos",