Add props to override/set gallery/component styles

Author: KyleAMathews

README.md

@@ -50,3 +50,5 @@ Prop                       |    Description
 `marginBottom`             | Set marginBottom (in pixels) separate from marginRight
 `targetWidth`              | Desired width for each component. Used when calculating the gallery layout.
 `widthHeightRatio`         | Defaults to 1 but useful if components don't fit well in a square.
+`galleryStyle`             | Override/set inline styles for the gallery div.
+`componentStyle`           | Override/set inline styles for each component div.

examples/index.html

@@ -14,14 +14,22 @@
         width: 100%;
       }
       code {
+        background: #EDEDED;
+        border: none;
+        display: inline-block;
         font-family: "Inconsolata" monospace sans-serif;
+        overflow: initial;
+        padding: 16px;
+        white-space: inherit;
+        width: 100%;
+        word-wrap: inherit;
       }
       body {
         font-family: "Lato" sans-serif;
         line-height: 1.4;
         color: #4A4A4A;
       }
-      h1,h2 {
+      h1,h2,h3 {
         color: #1f1f1f;
       }
     </style>

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "isarray": "0.0.1",
+    "object-assign": "^2.0.0",
     "react-component-width-mixin": "^1.1.7"
   },
   "devDependencies": {

src/index.cjsx

@@ -1,6 +1,7 @@
 React = require 'react'
 PropTypes = React.PropTypes
 componentWidthMixin = require 'react-component-width-mixin'
+assign = require 'object-assign'
 
 calculateLayout = require './calculate_layout'
 
@@ -16,13 +17,17 @@ module.exports = React.createClass
     marginBottom: PropTypes.number
     targetWidth: PropTypes.number
     widthHeightRatio: PropTypes.number
+    galleryStyle: PropTypes.object
+    componentStyle: PropTypes.object
 
   getDefaultProps: ->
     margin: 10
     noMarginBottomOnLastRow: false
     targetWidth: 200
     widthHeightRatio: 1
     disableServerRender: false
+    galleryStyle: {}
+    componentStyle: {}
 
   render: ->
     # If we don't know the component width, there's nothing we can do.
@@ -34,7 +39,14 @@ module.exports = React.createClass
     else
       [componentWidth, componentsPerRow] = calculateLayout(@props, @state)
       return (
-        <div className="component-gallery #{@props.className}" style={{overflow: "hidden"}}>
+        <div
+          className="component-gallery #{@props.className}"
+          style={assign(
+            {},
+            {overflow: "hidden"},
+            @props.galleryStyle
+          )}
+        >
           {React.Children.map(@props.children, (child, i) =>
             marginBottom = @props.margin
 
@@ -59,16 +71,20 @@ module.exports = React.createClass
             return (
               React.DOM.div({
                 className: "component-wrapper"
-                style: {
-                  width: "#{componentWidth}px"
-                  height: "#{componentWidth*@props.widthHeightRatio}px"
-                  display: "inline-block"
-                  marginRight: "#{marginRight}px"
-                  marginBottom: "#{marginBottom}px"
-                  overflow: "hidden"
-                  position: "relative"
-                  "verticalAlign": "top"
-                }
+                style: assign(
+                  {},
+                  {
+                    width: "#{componentWidth}px"
+                    height: "#{componentWidth*@props.widthHeightRatio}px"
+                    display: "inline-block"
+                    marginRight: "#{marginRight}px"
+                    marginBottom: "#{marginBottom}px"
+                    overflow: "hidden"
+                    position: "relative"
+                    verticalAlign: "top"
+                  },
+                  @props.componentStyle
+                )
               }, child)
             )
           )}