docs(website): document refs

Author: gregberge

docs/advanced/Refs.mdx

@@ -0,0 +1,36 @@
+---
+name: Refs
+menu: Advanced
+---
+
+import { Playground } from 'docz'
+import { Input, styled } from '@smooth-ui/core-sc'
+
+# Refs
+
+Passing a `ref` prop to a Smooth UI component will give you the ref of the DOM node.
+
+<Playground>
+  {() => {
+    class Form extends React.Component {
+      constructor(props) {
+        super(props);
+        this.inputRef = React.createRef()
+      }
+
+      render() {
+        return (
+          <Input
+            ref={this.inputRef}
+            placeholder="Hover to focus!"
+            onMouseEnter={() => {
+              this.inputRef.current.focus()
+            }}
+          />
+        )
+      }
+    }
+
+    return <Form />
+  }}
+</Playground>