added render Prop, removed babelrc due to rollup issues, (patch)

README.md

@@ -34,7 +34,7 @@ Ever wanted to implement one of those incredible designs you find on [dribble](h
 * [Props](#props)
   * [dipId](#dipid)
   * [children](#children)
-  * [render (TODO)](#render-todo)
+  * [render](#render)
   * [duration](#duration)
   * [easing](#easing)
   * [element](#element)
@@ -147,11 +147,13 @@ The `id` that groups two different dip elements. React-dip will only create anim
 
 > `React Element` | **Required unless using `render`-prop!**
 
-Content that is rendered as part of that `dip`.
+Content that is rendered as part of that `Dip`.
 
-### render (TODO)
+### render
 
-> `function({})` | **Required unless using `children`-prop!**
+> `function({ref: function(), styles: {}})` | **Required unless using `children`-prop!**
+
+Function that should return the content that is rendered as part of that `Dip`. Allows for more advanced pattern and skips the wrapping Element. See [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) for further details.
 
 **Warning:** `<Dip render>` takes precedence over `<Dip children>` so don’t use both in the same `<Dip />`.
 
@@ -231,6 +233,7 @@ No _DEEEE-EYE-PEEE_, just **dip** your taco into some tasty salsa. 🌮
 * Block-Elements h1 etc
 * nested Elements
 * transitioning to elements in scrolled lists (via browser back)
+* text can get distorted
 
 ## Inspired by
 
@@ -246,10 +249,10 @@ No _DEEEE-EYE-PEEE_, just **dip** your taco into some tasty salsa. 🌮
 There are tons of ideas for improving `react-dip` such as adding fine grained control to your transitions, but the primary goal will stay to keep the API as symple as possible.
 
 * [x] add chapter about polyfilling
-* [ ] render props (of course)
+* [x] render props (of course)
 * [x] add support for custom timing functions
 * [ ] add support for staggering
-* [ ] add complex examples with routing etc.
+* [ ] add complex examples with renderProps, routing etc.
 * [ ] add real tests
 * [ ] add possibility of declaring alternative components that are shown whilst animating
 * [ ] export types for flow and typescript

examples/create-react-app/package.json

@@ -7,7 +7,7 @@
     "flow-bin": "^0.69.0",
     "prettier": "^1.11.1",
     "react": "^16.3.1",
-    "react-dip": "^0.0.3-4",
+    "react-dip": "^0.0.3-beta.1",
     "react-dom": "^16.3.1",
     "react-router-dom": "^4.2.2",
     "react-scripts": "^1.1.4",

examples/create-react-app/src/App.css

@@ -5,6 +5,11 @@
   color: white;
 }
 
+h1 {
+  display: inline-block;
+  color: #4abdac;
+}
+
 .App-title {
   font-size: 1.5em;
 }

examples/create-react-app/src/App.js

@@ -3,7 +3,6 @@ import React from 'react'
 import './App.css'
 import Dip from 'react-dip'
 import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
-import avatar from './Avatar.svg'
 
 const contacts = [
   {
@@ -90,7 +89,12 @@ const List = () => (
       {contacts.map(contact => (
         <li key={contact.id}>
           <Link to={`/profile/${contact.id}`}>
-            <Dip dipId={contact.id.toString()}>{contact.firstName}</Dip>
+            <Dip
+              dipId={contact.id.toString()}
+              style={{display: 'inline-block'}}
+            >
+              {contact.firstName}
+            </Dip>
           </Link>
         </li>
       ))}
@@ -102,8 +106,7 @@ const Profile = ({match}) => {
   const contact = contactsById[match.params.id]
   return (
     <section>
-      <img src={avatar} alt="Profile" />
-      <Dip component="h1" dipId={match.params.id}>
+      <Dip element="h1" dipId={match.params.id} optInCssStyles={['color']}>
         {contact.firstName} {contact.lastName}
       </Dip>
     </section>

examples/create-react-app/yarn.lock

@@ -5592,9 +5592,9 @@ react-dev-utils@^5.0.1:
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-dip@^0.0.3-4:
-  version "0.0.3-4"
-  resolved "https://registry.yarnpkg.com/react-dip/-/react-dip-0.0.3-4.tgz#e96d96d430d919d9793c8ca4b9f332a16b8f9d74"
+react-dip@^0.0.3-beta.1:
+  version "0.0.3-beta.1"
+  resolved "https://registry.yarnpkg.com/react-dip/-/react-dip-0.0.3-beta.1.tgz#a3de907f9cf3e233e0aa61eb143f7e59eddbc5a6"
 
 react-dom@^16.3.1:
   version "16.3.1"

package.json

@@ -3,18 +3,19 @@
   "version": "0.0.3-beta.1",
   "description": "Simple & declarative transition animations for React",
   "main": "dist/react-dip.cjs.js",
-  "module": "dist/react-dip.esm.js",
   "jsnext:main": "dist/react-dip.esm.js",
+  "module": "dist/react-dip.esm.js",
+  "pure-module": true,
   "scripts": {
     "build": "kcd-scripts build --bundle",
+    "copyFlowSource": "node ./buildscripts/createFlowLinks",
     "flow": "flow",
     "lint": "kcd-scripts lint",
+    "postbuild": "npm run copyFlowSource",
     "precommit": "kcd-scripts precommit",
     "storybook": "start-storybook -p 6006",
     "storybook:build": "build-storybook",
-    "test": "flow && jest",
-    "copyFlowSource": "node ./buildscripts/createFlowLinks",
-    "postbuild": "npm run copyFlowSource"
+    "test": "flow && jest"
   },
   "files": ["dist", "preact", "src"],
   "repository": {
@@ -44,24 +45,24 @@
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-jest": "^22.4.3",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-env": "^1.6.1",
     "babel-preset-flow": "^6.23.0",
-    "babel-preset-react": "^6.24.1",
     "babel-runtime": "^6.26.0",
     "cross-env": "^5.1.4",
     "flow-bin": "^0.69.0",
     "jest": "^22.4.3",
     "kcd-scripts": "^0.37.0",
     "prettier": "^1.11.1",
+    "prop-types": "^15.6.1",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
     "regenerator-runtime": "^0.11.1"
   },
   "dependencies": {},
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": ">=15.0.0",
+    "react-dom": ">=15.0.0"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",
@@ -78,7 +79,8 @@
     "coverage",
     "dist",
     "storybook-static",
-    "examples"
+    "examples",
+    "stories"
   ],
   "jest": {
     "rootDir": "./src/"

src/index.js

@@ -25,7 +25,7 @@ type Props = {
   easing?: string,
   element?: string,
   optInCssStyles: string[],
-  render?: () => Node,
+  render?: ({ref: (?AnimatableElement) => void, style: {}}) => Node,
   style?: CSSStyleDeclaration,
 }
 
@@ -100,17 +100,11 @@ class Dip extends Component<Props> {
     ref != null && Dip.registerFromNode(this.props.dipId, ref)
   }
 
-  render() {
-    const {
-      children,
-      dipId,
-      duration: _ignoreDuration_, // eslint-disable-line no-unused-vars
-      element: Element = 'div',
-      optInCssStyles: _ignoreOptInCssStyles_, // eslint-disable-line no-unused-vars
-      render,
-      style,
-      ...rest
-    } = this.props
+  /**
+   * notify the user if props are not set correctly via console.log / console.warn
+   */
+  logWarnings = () => {
+    const {children, dipId, element, render} = this.props // eslint-disable-line no-unused-vars // eslint-disable-line no-unused-vars
     /* eslint-disable */
     if (dipId == null) {
       console.error(
@@ -122,7 +116,37 @@ class Dip extends Component<Props> {
         'please specify either a `children` or a `render`-Prop. See https://github.com/mdugue/react-dip',
       )
     }
+    if (render != null && element != null) {
+      console.warn(
+        'the `element`-Prop will be ignored as you specified a `render`-Prop. See https://github.com/mdugue/react-dip',
+      )
+    }
     /* eslint-disable */
+  }
+
+  render() {
+    const {
+      children,
+      dipId: _ignoreDipId_, // eslint-disable-line no-unused-vars,
+      duration: _ignoreDuration_, // eslint-disable-line no-unused-vars
+      element: Element = 'div',
+      optInCssStyles: _ignoreOptInCssStyles_, // eslint-disable-line no-unused-vars
+      render,
+      style,
+      ...rest
+    } = this.props
+
+    this.logWarnings()
+
+    if (render != null)
+      return render({
+        ...rest,
+        ref: this.addRef,
+        style: {
+          ...style,
+          transformOrigin: 'left top',
+        },
+      })
     return (
       <Element
         {...rest}

src/util.js

@@ -5,3 +5,8 @@ export function pick(o: {}, fields: string[]) {
     return a
   }, {})
 }
+
+// TODO Implement if needed
+export function omit(o: {}) {
+  return o
+}

stories/.eslintrc

@@ -0,0 +1,16 @@
+{
+  "extends": ["../node_modules/kcd-scripts/eslint.js"],
+  "root": true,
+  "rules": {
+    "max-len": "off",
+    "no-console": "off",
+    "no-alert": "off",
+    "react/prop-types": "off",
+    "react/jsx-closing-bracket-location": "off",
+    "react/jsx-indent": "off",
+    "jsx-a11y/no-noninteractive-element-interactions": "off",
+    "prefer-const": "off",
+    "eqeqeq": "off",
+    "complexity": "off"
+  }
+}