fix(innerRef): allow ref as object (#409)

* fix(innerRef): allow ref as object

React 16.3 comes with a createRef API where you can add ref as an object

* fix(test): update snapshots

.all-contributorsrc

@@ -596,6 +596,15 @@
         "code",
         "test"
       ]
+    },
+    {
+      "login": "viktorivarsson",
+      "name": "Viktor Ivarsson",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/7829175?v=4",
+      "profile": "https://github.com/viktorivarsson",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

README.md

@@ -14,7 +14,7 @@
 [![downloads][downloads-badge]][npmcharts]
 [![MIT License][license-badge]][license]
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-62-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-63-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs]
 [![Chat][chat-badge]][chat]
 [![Code of Conduct][coc-badge]][coc]
@@ -173,7 +173,7 @@ Thanks goes to these people ([emoji key][emojis]):
 | [<img src="https://avatars3.githubusercontent.com/u/22868432?v=3" width="100px;"/><br /><sub><b>Lufty Wiranda</b></sub>](http://instagram.com/luftywiranda13)<br />[💻](https://github.com/paypal/glamorous/commits?author=luftywiranda13 "Code") | [<img src="https://avatars3.githubusercontent.com/u/3208863?v=3" width="100px;"/><br /><sub><b>Ansuman Shah</b></sub>](https://github.com/ansumanshah)<br />[💻](https://github.com/paypal/glamorous/commits?author=ansumanshah "Code") [📖](https://github.com/paypal/glamorous/commits?author=ansumanshah "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/11598?v=3" width="100px;"/><br /><sub><b>Travis LaDuke</b></sub>](http://-)<br />[💡](#example-laduke "Examples") | [<img src="https://avatars2.githubusercontent.com/u/11290953?v=3" width="100px;"/><br /><sub><b>Aydın Çağrı Dumlu</b></sub>](https://github.com/acgrdumlu)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Aacgrdumlu "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=acgrdumlu "Code") | [<img src="https://avatars2.githubusercontent.com/u/1383861?v=3" width="100px;"/><br /><sub><b>Maja Wichrowska</b></sub>](https://github.com/majapw)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Amajapw "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/6845263?v=3" width="100px;"/><br /><sub><b>Tom Liu</b></sub>](https://github.com/gt3240)<br />[📖](https://github.com/paypal/glamorous/commits?author=gt3240 "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/1863771?v=3" width="100px;"/><br /><sub><b>Siddharth Kshetrapal</b></sub>](https://github.com/siddharthkp)<br />[⚠️](https://github.com/paypal/glamorous/commits?author=siddharthkp "Tests") [🔧](#tool-siddharthkp "Tools") |
 | [<img src="https://avatars2.githubusercontent.com/u/5257243?v=3" width="100px;"/><br /><sub><b>WillowHQ</b></sub>](https://github.com/WillowHQ)<br />[📖](https://github.com/paypal/glamorous/commits?author=WillowHQ "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/12202757?v=4" width="100px;"/><br /><sub><b>Mohammad Rajabifard</b></sub>](https://tarino.ir)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Amorajabi "Bug reports") [📖](https://github.com/paypal/glamorous/commits?author=morajabi "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/17005317?v=3" width="100px;"/><br /><sub><b>Omar Albacha</b></sub>](https://github.com/Oalbacha)<br />[💻](https://github.com/paypal/glamorous/commits?author=Oalbacha "Code") [📖](https://github.com/paypal/glamorous/commits?author=Oalbacha "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/28659384?v=3" width="100px;"/><br /><sub><b>tdeschryver</b></sub>](https://github.com/tdeschryver)<br />[💻](https://github.com/paypal/glamorous/commits?author=tdeschryver "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=tdeschryver "Tests") | [<img src="https://avatars0.githubusercontent.com/u/4955191?v=4" width="100px;"/><br /><sub><b>Dylan Mozlowski</b></sub>](https://github.com/DylanMoz)<br />[💻](https://github.com/paypal/glamorous/commits?author=DylanMoz "Code") | [<img src="https://avatars2.githubusercontent.com/u/3275424?v=4" width="100px;"/><br /><sub><b>andretshurotshka</b></sub>](https://github.com/goodmind)<br />[💻](https://github.com/paypal/glamorous/commits?author=goodmind "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=goodmind "Tests") | [<img src="https://avatars3.githubusercontent.com/u/12836237?v=4" width="100px;"/><br /><sub><b>Danila</b></sub>](https://github.com/O4epegb)<br />[⚠️](https://github.com/paypal/glamorous/commits?author=O4epegb "Tests") |
 | [<img src="https://avatars3.githubusercontent.com/u/12473268?v=4" width="100px;"/><br /><sub><b>Junyoung Clare Jang</b></sub>](http://ailrun.github.io/)<br />[💻](https://github.com/paypal/glamorous/commits?author=Ailrun "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=Ailrun "Tests") | [<img src="https://avatars2.githubusercontent.com/u/897575?v=4" width="100px;"/><br /><sub><b>Björn Ricks</b></sub>](https://twitter.com/bjoernricks)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Abjoernricks "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=bjoernricks "Code") [📖](https://github.com/paypal/glamorous/commits?author=bjoernricks "Documentation") [⚠️](https://github.com/paypal/glamorous/commits?author=bjoernricks "Tests") | [<img src="https://avatars0.githubusercontent.com/u/4934193?v=4" width="100px;"/><br /><sub><b>Tyler Deitz</b></sub>](http://tylerdeitz.com)<br />[💻](https://github.com/paypal/glamorous/commits?author=tvler "Code") | [<img src="https://avatars2.githubusercontent.com/u/16104985?v=4" width="100px;"/><br /><sub><b>Shovan Chatterjee</b></sub>](https://twitter.com/shovan_ch)<br />[📖](https://github.com/paypal/glamorous/commits?author=shovanch "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/6839660?v=4" width="100px;"/><br /><sub><b>johnjessewood</b></sub>](https://github.com/johnjesse)<br />[💻](https://github.com/paypal/glamorous/commits?author=johnjesse "Code") | [<img src="https://avatars3.githubusercontent.com/u/856386?v=4" width="100px;"/><br /><sub><b>Daniel</b></sub>](https://www.danielberndt.net)<br />[💻](https://github.com/paypal/glamorous/commits?author=danielberndt "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=danielberndt "Tests") | [<img src="https://avatars0.githubusercontent.com/u/174864?v=4" width="100px;"/><br /><sub><b>Ken Powers</b></sub>](https://knpw.rs)<br />[🤔](#ideas-knpwrs "Ideas, Planning, & Feedback") [💡](#example-knpwrs "Examples") |
-| [<img src="https://avatars1.githubusercontent.com/u/442932?v=4" width="100px;"/><br /><sub><b>John Grishin</b></sub>](http://johngrish.in)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Aexah "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=exah "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=exah "Tests") | [<img src="https://avatars3.githubusercontent.com/u/200528?v=4" width="100px;"/><br /><sub><b>Mordy Tikotzky</b></sub>](https://github.com/tikotzky)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Atikotzky "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=tikotzky "Code") | [<img src="https://avatars3.githubusercontent.com/u/1027024?v=4" width="100px;"/><br /><sub><b>Alasdair McLeay</b></sub>](https://github.com/penx)<br />[💡](#example-penx "Examples") | [<img src="https://avatars1.githubusercontent.com/u/4171528?v=4" width="100px;"/><br /><sub><b>Ardamis Yeshak</b></sub>](https://github.com/zabute)<br />[🔧](#tool-zabute "Tools") | [<img src="https://avatars2.githubusercontent.com/u/3729628?v=4" width="100px;"/><br /><sub><b>Matthew Armstrong</b></sub>](https://github.com/raingerber)<br />[⚠️](https://github.com/paypal/glamorous/commits?author=raingerber "Tests") | [<img src="https://avatars3.githubusercontent.com/u/876694?v=4" width="100px;"/><br /><sub><b>Wu Haotian</b></sub>](https://github.com/whtsky)<br />[💻](https://github.com/paypal/glamorous/commits?author=whtsky "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=whtsky "Tests") |
+| [<img src="https://avatars1.githubusercontent.com/u/442932?v=4" width="100px;"/><br /><sub><b>John Grishin</b></sub>](http://johngrish.in)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Aexah "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=exah "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=exah "Tests") | [<img src="https://avatars3.githubusercontent.com/u/200528?v=4" width="100px;"/><br /><sub><b>Mordy Tikotzky</b></sub>](https://github.com/tikotzky)<br />[🐛](https://github.com/paypal/glamorous/issues?q=author%3Atikotzky "Bug reports") [💻](https://github.com/paypal/glamorous/commits?author=tikotzky "Code") | [<img src="https://avatars3.githubusercontent.com/u/1027024?v=4" width="100px;"/><br /><sub><b>Alasdair McLeay</b></sub>](https://github.com/penx)<br />[💡](#example-penx "Examples") | [<img src="https://avatars1.githubusercontent.com/u/4171528?v=4" width="100px;"/><br /><sub><b>Ardamis Yeshak</b></sub>](https://github.com/zabute)<br />[🔧](#tool-zabute "Tools") | [<img src="https://avatars2.githubusercontent.com/u/3729628?v=4" width="100px;"/><br /><sub><b>Matthew Armstrong</b></sub>](https://github.com/raingerber)<br />[⚠️](https://github.com/paypal/glamorous/commits?author=raingerber "Tests") | [<img src="https://avatars3.githubusercontent.com/u/876694?v=4" width="100px;"/><br /><sub><b>Wu Haotian</b></sub>](https://github.com/whtsky)<br />[💻](https://github.com/paypal/glamorous/commits?author=whtsky "Code") [⚠️](https://github.com/paypal/glamorous/commits?author=whtsky "Tests") | [<img src="https://avatars1.githubusercontent.com/u/7829175?v=4" width="100px;"/><br /><sub><b>Viktor Ivarsson</b></sub>](https://github.com/viktorivarsson)<br />[💻](https://github.com/paypal/glamorous/commits?author=viktorivarsson "Code") |
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 

src/__tests__/__snapshots__/typescript.js.snap

@@ -105,13 +105,13 @@ test/should-fail.test.tsx(272,18): error TS2345: Argument of type '{ textAlign:
 test/should-fail.test.tsx(289,35): error TS2322: Type '{ display: \\"blocks\\"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<object & CSSProperties & ExtraGlamorousP...'.
   Type '{ display: \\"blocks\\"; }' is not assignable to type 'Readonly<object & CSSProperties & ExtraGlamorousProps>'.
     Types of property 'display' are incompatible.
-      Type '\\"blocks\\"' is not assignable to type '\\"none\\" | \\"ruby\\" | \\"table\\" | \\"inline\\" | \\"grid\\" | \\"initial\\" | \\"inherit\\" | \\"unset\\" | \\"block\\" | \\"run-...'.
+      Type '\\"blocks\\"' is not assignable to type '\\"none\\" | \\"ruby\\" | \\"table\\" | \\"inherit\\" | \\"initial\\" | \\"unset\\" | \\"contents\\" | \\"block\\" | \\"inline\\" | \\"...'.
 test/should-fail.test.tsx(290,38): error TS2559: Type '{ display: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<object & ExtraGlamorousProps, ComponentS...'.
 test/should-fail.test.tsx(291,42): error TS2559: Type '{ display: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<object & ExtraGlamorousProps, ComponentS...'.
 test/should-fail.test.tsx(293,29): error TS2322: Type '{ display: \\"blocks\\"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & object & CSS...'.
   Type '{ display: \\"blocks\\"; }' is not assignable to type 'Readonly<HTMLProps<HTMLDivElement> & object & CSSProperties & ExtraGlamorousProps>'.
     Types of property 'display' are incompatible.
-      Type '\\"blocks\\"' is not assignable to type '\\"none\\" | \\"ruby\\" | \\"table\\" | \\"inline\\" | \\"grid\\" | \\"initial\\" | \\"inherit\\" | \\"unset\\" | \\"block\\" | \\"run-...'.
+      Type '\\"blocks\\"' is not assignable to type '\\"none\\" | \\"ruby\\" | \\"table\\" | \\"inherit\\" | \\"initial\\" | \\"unset\\" | \\"contents\\" | \\"block\\" | \\"inline\\" | \\"...'.
 test/should-fail.test.tsx(294,32): error TS2559: Type '{ display: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & object & Ext...'.
 test/should-fail.test.tsx(295,36): error TS2559: Type '{ display: string; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<HTMLProps<HTMLDivElement> & object & Ext...'.
 "

src/create-glamorous.js

@@ -100,7 +100,7 @@ function createGlamorous(splitProps) {
         // returning an object with a toString method that gives the className
         className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
         cssOverrides: PropTypes.object,
-        innerRef: PropTypes.func,
+        innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
         glam: PropTypes.object,
       }
 

typings/glamorous-component.d.ts

@@ -14,7 +14,7 @@ export interface ExtraGlamorousProps {
   /**
    * Called with the inner element's reference
    */
-  innerRef?: (instance: any) => void
+  innerRef?: object | ((instance: any) => void)
 
   className?: string
   /**