Use react component in vue 3 and data binding

Vue React Wrapper

Use react component in vue 3 and data binding

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Instagram

Why do People Say: "Developers are Lazy"?
The saying “work smart, not hard” is applicable for programmers.
.
https://hackernoon.com/why-do-people-say-developers-are-lazy

.
Author: Aga Wozniak
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

Mitigating the DDOS Threats Facing Banks and Fintechs
As much as digitization and cyber simplified banking, the Fintech sector has left digital payment activity exposed to malicious and suspicious activity.
.
https://hackernoon.com/mitigating-the-ddos-threats-facing-banks-and-fintechs

.
Author: Josh Horowitz
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

24 Best JavaScript Blogs and Websites
In this overview, we have compiled a list of popular sites, as well as JS blogs that are worth reading and keeping in your bookmarks.
.
https://hackernoon.com/24-best-javascript-blogs-and-websites

.
Author: natashatsybliyenko
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

The Projects Working to Lower Ethereum Gas Fees
As more investors try their hand at DeFi, gas fees are shooting over the roof, making engaging with decentralized apps uneconomical for most users.
.
https://hackernoon.com/ethereum-gas-fees-are-there-any-projects-working-to-optimize-eth-gas-fees

.
Author: CryptoVirally SLR
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

On the Edge of a New Year: IT Predictions for 2022
The single biggest cause of network errors are people.
.
https://hackernoon.com/an-interview-with-uplogix-ceo-lisa-frankovitch

.
Author: Mignonette Garnier
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...

How to Modernize IBM i Applications
If you’re like most IBM i users, you know how much value your IBM i data and applications bring to your business. Your end-users, however, may not. In today’s world of rich user experience, fast-paced application development, and constantly evolving customer expectations, IBM i applications are unde…
.
https://hackernoon.com/how-to-modernize-ibm-i-applications

.
Author: Lansa
.
.
.
.
.
#blog #100Daysofcode #javascript #vuejs #datascientist #peoplewhocode #learntocode #coding #developerlife #frontenddeveloper #backenddeveloper #fullstackdeveloper #developer #webdeveloper #thedevlife #phpdeveloper #computerscience #programmer #programmingisfun #codingdays
...