Add more example

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-aspect-ratio",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "React Aspect Ratio Component",
   "author": "Roderick Hsiao <roderickhsiao@gmail.com>",
   "repository": {
@@ -54,7 +54,8 @@
     "react": "^0.14.7 || ^15.0.0"
   },
   "dependencies": {
-    "prop-types": "^15.5.0"
+    "prop-types": "^15.5.0",
+    "react-aspect-ratio": "^1.0.7"
   },
   "main": "dist/index.js",
   "engines": {

src/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 class AspectRatio extends PureComponent {
   node: {
     style: Object
-  }
+  };
 
   constructor(props: Object) {
     super(props);
@@ -14,7 +14,7 @@ class AspectRatio extends PureComponent {
 
   static defaultProps = {
     className: 'react-aspect-ratio-placeholder',
-    ratio: '3/4'
+    ratio: '1/1'
   };
 
   static propTypes = {

src/stories/index.js

@@ -68,6 +68,49 @@ storiesOf('AspectRatio', module)
       />
     </div>
   ))
+  .add('Gallery', () => {
+    const images = [
+      {
+        src: 'http://pbs.twimg.com/media/CO-ghuGWEAAGsFd.jpg',
+        ratio: '261/393'
+      },
+      {
+        src: 'http://static.boredpanda.com/blog/wp-content/uploads/2015/04/bulldog-puppy-cute-dog-photography-23__605.jpg',
+        ratio: '550/393'
+      },
+      {
+        src: 'https://www.dogspuppiesforsale.com/uploads/source/Category%20update/Bulldog/bulldog-puppies-wallpaper-4.jpg',
+        ratio: '629/393'
+      },
+      {
+        src: 'http://static.boredpanda.com/blog/wp-content/uploads/2015/04/bulldog-puppy-cute-dog-photography-5__605.jpg',
+        ratio: '599/393'
+      },
+      {
+        src: 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQikQmH0BSHHpjcqFkyZr5FqMXuwONleKSsMRmcz-L-bLJHmyxgqw',
+        ratio: '500/377'
+      }
+    ];
+    return (
+      <div>
+        <PageTitle />
+        <Card
+          titleText="Image Gallery with Aspect Ratio"
+          contentNode={
+            <div className="gallery">
+              {images.map(image => (
+                <div className="gallery__image" key={image.src}>
+                  <AspectRatio ratio={image.ratio}>
+                    <img src={image.src} />
+                  </AspectRatio>
+                </div>
+              ))}
+            </div>
+          }
+        />
+      </div>
+    );
+  })
   .add('Iframe', () => (
     <div>
       <PageTitle />

theme.css

@@ -61,7 +61,7 @@ body {
 
 .card {
   box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 6px, rgba(0, 0, 0, 0.117647) 0 1px 4px;
-  width: 50%;
+  width: 60%;
   margin: 10px;
   background-color: #fff;
 }
@@ -88,3 +88,17 @@ body {
 	font-weight: normal;
 	font-style: normal;
 }
+
+.gallery {
+  margin: 1.5em 0;
+  padding: 0;
+  column-count: 2;
+  column-gap: 1.5em;
+  font-size: .85em;
+}
+.gallery__image {
+  background-color: #eee;
+  display: inline-block;
+  margin: 0 0 1em;
+  width: 100%;
+}

theme.js

@@ -78,7 +78,7 @@ export default StyleSheet.create({
     },
     "card": {
         "boxShadow": "rgba(0, 0, 0, 0.117647) 0 1px 6px, rgba(0, 0, 0, 0.117647) 0 1px 4px",
-        "width": "50%",
+        "width": "60%",
         "marginTop": 10,
         "marginRight": 10,
         "marginBottom": 10,
@@ -104,5 +104,27 @@ export default StyleSheet.create({
         "paddingRight": 16,
         "paddingBottom": 16,
         "paddingLeft": 16
+    },
+    "gallery": {
+        "marginTop": 1.5,
+        "marginRight": 0,
+        "marginBottom": 1.5,
+        "marginLeft": 0,
+        "paddingTop": 0,
+        "paddingRight": 0,
+        "paddingBottom": 0,
+        "paddingLeft": 0,
+        "columnCount": 2,
+        "columnGap": 1.5,
+        "fontSize": 0.85
+    },
+    "gallery__image": {
+        "backgroundColor": "#eee",
+        "display": "inline-block",
+        "marginTop": 0,
+        "marginRight": 0,
+        "marginBottom": 1,
+        "marginLeft": 0,
+        "width": "100%"
     }
 });