init

Author: Ulises Giacoman

.gitignore

@@ -0,0 +1,48 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+.next
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+**/.DS_Store

README.md

@@ -0,0 +1,3 @@
+### SSR React components, testing with Next.js
+
+1. Button with Ink ripple

components/button.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import Ink from 'react-ink'
+
+export default class Button extends React.Component {
+  render () {
+    return (
+      <button style={{ position: "relative" }}>
+        <style>
+          {`body {
+            font-family: Roboto, sans-serif;
+            margin: 0;
+            padding: 40px;
+          }
+          canvas {
+            color: #673AB7;
+          }
+          button {
+            background: #fff;
+            border: 0;
+            border-radius: 2px;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+            font-size: 16px;
+            font-family: inherit;
+            min-width: 180px;
+            padding: 12px 24px;
+            text-transform: uppercase;
+          }
+          button:focus {
+            outline: none;
+          }`}
+        </style>      
+        <Ink/>
+        {this.props.text}
+      </button>
+    )
+  }
+}

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "ssr-components",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "uli",
+  "license": "MIT",
+  "dependencies": {
+    "next": "^2.0.0-beta",
+    "react-ink": "^6.1.0"
+  },
+  "scripts": {
+    "dev": "next"
+  }
+}

pages/index.js

@@ -0,0 +1,7 @@
+import Button from '../components/button'
+
+export default () => (
+    <div>
+        <Button text='hi'/>
+    </div>
+)