add example with styled-components

examples/Examples.md

@@ -42,3 +42,25 @@ using `maxHeight`
   defaultValue={'this\nis\na\nlong\ninitial\ntext'}
 />
 ```
+
+#### Styled components
+
+```js
+const StyledTextarea = styled(TextareaAutosize)`
+  font-size: ${({ theme }) => theme.textarea.fontSize};
+  border-color: ${({ theme }) => theme.textarea.borderColor};
+  resize: none;
+  box-sizing: border-box;
+  width: 100%;
+`;
+
+<StyledTextarea
+  defaultValue='Church-key flannel bicycle rights, tofu tacos before they sold out polaroid'
+  theme={{
+    textarea: {
+      fontSize: '18px',
+      borderColor: 'green'
+    }
+  }}
+/>
+```

package.json

@@ -51,7 +51,7 @@
     "css-loader": "^0.28.5",
     "file-loader": "^1.1.5",
     "jest": "^21.2.1",
-    "node-sass": "4.5.2",
+    "node-sass": "^4.8.3",
     "progress-bar-webpack-plugin": "^1.10.0",
     "raw-loader": "^0.5.1",
     "react": "^16",
@@ -62,6 +62,7 @@
     "require-dir": "^0.3.0",
     "sass-loader": "^6.0.6",
     "smooth-release": "^8.0.0",
+    "styled-components": "^3.2.5",
     "ts-jest": "^21.2.3",
     "ts-loader": "^2.3.3",
     "typescript": "^2.4.2",

styleguide.config.js

@@ -11,6 +11,9 @@ module.exports = {
 
   // content
   title: 'react-autosize-textarea',
+  compilerConfig: {
+    transforms: { dangerousTaggedTemplateString: true }
+  },
   // assetsDir: 'styleguide/assets',
   template: 'styleguide/index.html',
   propsParser: require('react-docgen-typescript').parse, // detect docs using TS information

styleguide/setup.ts

@@ -1 +1,5 @@
+import styled from 'styled-components';
+
+(global as any).styled = styled;
+
 import '../examples/examples.scss';