From 3c7fedbf3858f669a9298b638749428ed797fe1f Mon Sep 17 00:00:00 2001
From: EGOIST <0x142857@gmail.com>
Date: Sun, 7 Jul 2019 17:37:07 +0800
Subject: [PATCH] feat: allow to pass props

---
 README.md    | 26 ++++++++++++++++++++++++++
 src/index.js |  8 +++++---
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index d6ca641..0e0b3d1 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,32 @@ const ReactComponent = toReact(VueComponent)
 render(<ReactComponent />, document.getElementById('app'))
 ```
 
+### Passing Props
+
+By default we pass all props from React to Vue:
+
+```js
+const Counter = toReact({
+  props: ['initialCount'],
+  render(h) {
+    return h('button', {}, [this.initialCount])
+  }
+})
+
+const App = <Counter initialCount={0} />
+```
+
+However you can customize how the props are passed to Vue with the `passProps` option:
+
+```js
+toReact(VueComponent, {
+  // Only pass `initialProps` prop
+  passProps: props => ({ initialCount: props.initialProps }),
+  // Or disable props
+  passProps: false
+})
+```
+
 ## Contributing
 
 1. Fork it!
diff --git a/src/index.js b/src/index.js
index 60b6f2f..7b399d4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,16 @@
 import React from 'react'
 import Vue from 'vue'
 
-export default Component => {
-  return () => {
+const defaultPassProps = props => props
+
+export default (Component, { passProps = defaultPassProps } = {}) => {
+  return props => {
     const el = React.useRef(null)
 
     React.useEffect(() => {
       const app = new Vue({
         el: el.current,
-        render: h => h(Component)
+        render: h => h(Component, { props: passProps ? passProps(props) : {} })
       })
 
       return () => app.$destroy()