Use children instead of component prop

Also, use a <button> by default instead of a <div>

Fixes #1

Author: mjackson

README.md

@@ -55,9 +55,11 @@ class App extends React.Component {
 }
 ```
 
-By default, a `<PointTarget>` renders a `<div>`. Use the `<PointTarget component>` prop to make it render something else. All props are passed directly through to your component (besides `onClick`, `onTouchStart`, `onTouchMove`, `onTouchEnd`, and `onTouchCancel`, which `<PointTarget>` needs to overwrite in order to do its thing).
+By default, a `<PointTarget>` renders a `<button>`. Use the [children](https://facebook.github.io/react/tips/children-props-type.html) prop to make it render something else.
 
-For example, to render a `<button>`:
+*Note:* The `onClick`, `onTouchStart`, `onTouchMove`, `onTouchEnd`, and `onTouchCancel` props will be overwritten because `<PointTarget>` needs them to do its thing).
+
+For example, to render a `<div>`:
 
 ```js
 import React from 'react'
@@ -70,12 +72,12 @@ class App extends React.Component {
 
   render() {
     return (
-      <PointTarget component="button" onPoint={this.handlePoint}/>
+      <PointTarget onPoint={this.handlePoint}>
+        <div>Point here</div>
+      </PointTarget>
     )
   }
 }
 ```
 
-You can also pass in custom component classes. That's it :)
-
-Enjoy!
+That's it :) Enjoy!

modules/PointTarget.js

@@ -8,16 +8,13 @@ const touchY = (event) =>
 
 class PointTarget extends React.Component {
   static propTypes = {
-    component: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.string
-    ]).isRequired,
+    children: PropTypes.node,
     tolerance: PropTypes.number,
     onPoint: PropTypes.func
   }
 
   static defaultProps = {
-    component: 'div',
+    children: React.createElement('button'),
     tolerance: 10
   }
 
@@ -65,24 +62,15 @@ class PointTarget extends React.Component {
   }
 
   render() {
-    const { component, ...props } = this.props
+    const element = React.Children.only(this.props.children)
 
-    // Let React setup event handlers for us.
-    // TODO: Warn if they try to pass these props in?
-    props.onClick = this.handleClick
-    props.onTouchStart = this.handleTouchStart
-    props.onTouchMove = this.handleTouchMove
-    props.onTouchCancel = this.handleTouchCancel
-    props.onTouchEnd = this.handleTouchEnd
-
-    // Avoid unknown props warning.
-    delete props.onPoint
-    delete props.tolerance
-
-    return React.createElement(
-      component,
-      props
-    )
+    return React.cloneElement(element, {
+      onClick: this.handleClick,
+      onTouchStart: this.handleTouchStart,
+      onTouchMove: this.handleTouchMove,
+      onTouchCancel: this.handleTouchCancel,
+      onTouchEnd: this.handleTouchEnd
+    })
   }
 }
 

modules/__tests__/PointTarget-test.js

@@ -15,6 +15,22 @@ describe('A <PointTarget>', () => {
     node = document.createElement('div')
   })
 
+  describe('with no children', () => {
+    it('renders a button', () => {
+      render(<PointTarget/>, node, () => {
+        expect(node.firstChild.tagName).toEqual('BUTTON')
+      })
+    })
+  })
+
+  describe('with children', () => {
+    it('renders them', () => {
+      render(<PointTarget><div/></PointTarget>, node, () => {
+        expect(node.firstChild.tagName).toEqual('DIV')
+      })
+    })
+  })
+
   describe('when it is clicked', () => {
     it('calls the onPoint callback', () => {
       let called = false