Vue React Wrapper

Status: Alpha

A wrapper of react component, use react component in vue quickly.

Why

As we all know, Vue 3 is becoming more and more popular, not only for its light weight, but also for its efficient performance. However, Vue’s ecology has always been lacking, and in some cases, there is no substitute for the same React component.

I just wanted to find a JSONViewer for Vue 3, but there wasn’t one, but the React ecosystem blossomed.

So, is there a way to use React in Vue? Only in a certain scenario, because the whole business uses Vue and only a few scenarios need React support, so it is not a big problem to mix the two frameworks. In the decimal scenario, createReactWrapper can be dynamically imported to reduce the first loading bundle size of the entire App.

Install

npm i vue-react-wrapper react react-dom

Requirement

• React ^18
• ReactDOM ^18
• Vue ^3

Simple Usage

Example for react-json-view

import ReactJSONView from 'react-json-view'
import { reactive, defineComponent } from 'vue'
import { createReactWrapper } from 'vue-react-wrapper'

// must pass a vue reactive object
const props = reactive({
  // props
  src: null as any,
  indentWidth: 2,
  theme: 'rjv-default',
})

// JSONView is vue component
// ReactJSONView is a React Component
const JSONView = createReactWrapper(ReactJSONView, props)

export default defineComponent({
  setup() {
    return () => <JSONView />
  },
})

And if you prefer write vue sfc.

<template>
  <JSONView />
</template>

<script setup lang="ts">
import ReactJSONView from 'react-json-view'
import { reactive } from 'vue'
import { createReactWrapper } from 'vue-react-wrapper'

// must pass a vue reactive object
const props = reactive({
  // props
  src: null as any,
  indentWidth: 2,
  theme: 'rjv-default',
})

// JSONView is vue component
// ReactJSONView is a React Component
const JSONView = createReactWrapper(ReactJSONView, props)
</script>

Pass slot or react children

Here is a simple React component.

export const List = (props) => {
  return React.createElement('div', null, [
    React.createElement(
      'ul',
      null,
      props.data.map((item) => React.createElement('li', { key: item }, item)),
    ),

    props.children,
  ])
}

Pass react children like this.

<template>
  <VList>
    <template #children>
      <button @click="remove">remove</button>
    </template>
  </VList>
</template>

<script lang="ts" setup>
import { createReactWrapper } from 'vue-react-wrapper'

const props = reactive({
  data: ['0', '1', '2'],
})

const VList = createReactWrapper(List, props)

const remove = () => {
  props.data.splice(props.data.length - 1, 1)
}

// and props pass into react will be reactive.
</script>

Pass default slot just change to this. Unlike the above, this will be injected into the Vue container instead of the React Children scope.

<template>
  <VList>
    <button @click="remove">remove</button>
  </VList>
</template>

Other usage

Check ./example/App.vue

TODO

• support react forwardRef
• support root react container and root context
• support pass vue ref
• react types without global jsx namespace

License

MIT. Coding with ❤.

GitHub

View Github