vue-to-react's Introduction

vue-to-react

This works for both Vue 2 and Vue 3.

Install

yarn add @egoist/vue-to-react

Usage

import React from 'react'
import { render } from 'react-dom'
import toReact from '@egoist/vue-to-react'

const VueComponent = {
  data() {
    return {
      count: 0
    }
  },

  render(h) {
    return h(
      'button',
      {
        on: {
          click: () => this.count++
        }
      },
      [this.count]
    )
  }
}

const ReactComponent = toReact(VueComponent)

render(<ReactComponent />, document.getElementById('app'))

Passing Props

By default we pass all props from React to Vue:

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:

toReact(VueComponent, {
  // Only pass `initialCount` prop
  passProps: props => ({ initialCount: props.initialCount }),
  // Or disable props
  passProps: false
})

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

Author

@egoist/vue-to-react © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

github.com/egoist · GitHub @EGOIST · Twitter @_egoistlily

vue-to-react's People

Contributors

Stargazers

Watchers

vue-to-react's Issues

Pass all props from React to Vue

And allow to customize which props should be passed to Vue.

IssueHunt Summary

egoist has been rewarded.

Backers (Total: $100.00)

issuehunt ($100.00)

Submitted pull Requests

#2 feat: allow to pass props

Tips

Checkout the Issuehunt explorer to discover more funded issues.
Need some help from other developers? Add your repositories on IssueHunt to raise funds.

IssueHunt has been backed by the following sponsors. Become a sponsor

Changing module from ejs to mjs broken storybook builds with v1.2.0

When building Vue storybook, with recent changes started getting below error as vue-to-react is dependency in @storybook/addon-docs

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                            11:37:40 AM

 error  in ./node_modules/@egoist/vue-to-react/dist/index.mjs

Can't import the named export 'createApp' from non EcmaScript module (only default export is available)

 error  in ./node_modules/@egoist/vue-to-react/dist/index.mjs

Can't import the named export 'h' from non EcmaScript module (only default export is available)

Suggested change
import * as Vue from 'vue'
to
import Vue from 'vue'
at https://github.com/egoist/vue-to-react/blob/master/src/index.ts#L2

@egoist Let me know if this is fine, i can raise PR for same

Recommend Projects