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(, 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 = +``` + +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()