adding some better readme stuff

README.md

@@ -1,50 +1,57 @@
-# React Picture Show [![Build Status](https://secure.travis-ci.org/areusjs/react-picture-show.png)](http://travis-ci.org/areusjs/react-picture-show) [![NPM version](https://badge.fury.io/js/react-picture-show.svg)](http://badge.fury.io/js/react-picture-show)
+# React Picture Show [![Build Status](https://secure.travis-ci.org/skiano/react-picture-show.png)](http://travis-ci.org/skiano/react-picture-show) [![NPM version](https://badge.fury.io/js/react-picture-show.svg)](http://badge.fury.io/js/react-picture-show)
 
-Basic Slideshow Component
+A Bare bones slideshow component that handles transitions between slides and exposes control so that it is easy to decorate with other features.
 
-## Basic Options
+**[PictureShow Demo](http://areusjs.github.io/react-picture-show/)**
 
-```javascript
-
-  <PictureShow
-    slides={[
-      {width: 100, height: 100, src: ''},
-      {width: 100, height: 100, src: ''}
-    ]}
-    ratio={[3,2]}
-    onTransition={function(){}}
-    startingSlide=1
-    />
+## installation
+
+#### node
 
+``` jsx
+  npm install react-picture-show
 ```
 
-### Basic
+The package includes lib/PictureShow.css and src/PictureShow.scss.
 
-```javascript
-  var PictureShow = require('react-picture-show');
+## Usage
 
-  var slides = [{
-    width: 900,
-    height: 600,
-    src: 'http://placehold.it/900x600'
-  }, {
-    width: 600,
-    height: 900,
-    src: 'http://placehold.it/600x900'
-  }, {
-    width: 600,
-    height: 600,
-    src: 'http://placehold.it/600x600'
-  }];
+#### Basic
 
-  // in jsx
+```jsx
+
+  <PictureShow>
+    <img src='http://...'/>
+    <img src='http://...'/>
+    <div>another thing</div>
+    <img src='http://...'/>
+    <img src='http://...'/>
+  </PictureShow>
 
-  <PictureShow ratio={[3,2]} slides={slides}/>
 ```
 
-### Configuration
-
-__config__
+### Component Properties Overview
+
+Properties | Type | Default | Description | Supported 
+:--------- | :--- | :------ | :---------- | :-------- 
+**ratio** | array | Null | Creates a fixed-ratio slideshow / otherwise it stretches to fill its parent, for example `[16,9]` | yes 
+**animationSpeed** | number | 1500 | Roughly how many px/s the slide should move during transitions | yes
+**startingSlide** | number | 0 | The index of the slide to view first | yes
+**onBeforeTransition** | function | noop | ``function (currentIdx, nextIdx) {}`` | yes
+**onAfterTransition** | function | noop | ``function (previousIdx, currentIdx) {}`` | no
+**slideBuffer** | number | 1 | The number of slides should be marked as inview to the left and right | yes
+**clickDivide** | number (0–1) | 0.45 | Where the line between previous and next should fall when clicking the slideshow | yes 
+**infinite** | bool | true | Slideshow is continuous | no
+
+### Public methods on mounted component
+
+Method | Description | Supported 
+:----- | :---------- | :--------
+next | Go forward one slide | yes
+previous | Go backward one slide | yes 
+goToSlide | Go to a specific slide index | yes
+disable | Deactivate slideshow | no
+enable | Acticate slideshow | no
 
 ## License