Using Vue Composition API Inside your React Components with Reactivue

Using Vue Composition API Inside your React Components with Reactivue

The experimental reactivue package allows you to take the best parts of the Vue Composition API and React Hooks and use them together. What if you could use the Vue Composition API inside your React components? Here comes reactivue to enable you to do just that. Reactivue describes itself as the best elements from React and the best elements from Vue.js in one framework. In a nutshell, you can write Vue snippets inside React — think best of both worlds.

The experimental reactivue package allows you to take the best parts of the Vue Composition API and React Hooks and use them together.

React Hooks’ popularity has soared since the API was first released in v16.8. And for good reason — the ability to write and compose components as mere functions gives you incredible power and flexibility. Together with terrific TypeScript support, it’s no surprise Hooks are so appealing.

Then came the Vue Composition API, with its beautiful reactivity system and improved static typing support. It is indeed a good time to be a frontend engineer, but decision paralysis can be a real struggle. Do I give up writing Vue and port to React Hooks, or vice-versa?

Wait! What if you didn’t have to make a choice? What if you could use the Vue Composition API inside your React components? Here comes reactivue to enable you to do just that.

What is reactivue?

reactivue describes itself as the best elements from React and the best elements from Vue.js in one framework. In a nutshell, you can write Vue snippets inside React — think best of both worlds.

Note: reactivue is currently still experimental and might have some breaking changes in the future. Don’t use it in production yet, but feel free to try it out.

Getting started

This article assumes that you have a fair understanding of Vue’s reactivity with the Composition API as well as React functional components with Hooks. You do not need to be an expert by any means, but a fundamental familiarity of the concepts is necessary. We won’t be getting into the details of how they work, but how they work together with the help of reactivue.

Without further ado, let’s install reactivue. Installation is simple — just add the package with Yarn or npm, as shown below:

npm i reactivue
 // or
yarn add reactivue

Usage

Let’s build a simple color picker to see this in action. To keep things fairly straightforward, we’ll do away with styling and just stick to understanding how the setup works. The interesting part is visualizing how reactivue integrates the Vue Composition API with React functions to make them work in tandem seamlessly.

Our color picker merely picks a color from an HTML color input and updates the background color of our div based on the selected color. As an assignment, you could extend it to set various styles or add complex conditional logic to better understand the concepts. The code is below, followed by a deep dive.

import * as React from "react";
import { useState, ChangeEvent } from "react";
import { defineComponent, ref, computed, onUnmounted, onMounted } from "reactivue";

interface Props {
  color: string;
  height: number;
  width: number;
}

const MyColor = defineComponent(
  // setup function in Vue
  ({ color, width, height }: Props) => {
    const background = ref(color);
    const boxWidth = ref(width);
    const boxHeight = ref(height);
    const boxStyle: any = computed(() => {
      return {
        width: `${boxWidth.value}px`,
        height: `${boxHeight.value}px`,
        backgroundColor: background.value
      };
    });

    onMounted(() => console.log("Hello World"));
    onUnmounted(() => console.log("Goodbye World"));

    return { background, boxWidth, boxStyle, boxHeight };
  },
  // functional component in React
  ({ background, boxWidth, boxStyle }) => {
    // you are now in react territory. You can use all hooks and methods.
    const [newStyle, setNewStyle] = useState(boxStyle);
    const onChangeColor = ({
      target: { value }
    }: ChangeEvent<HTMLInputElement>) => {
      setNewStyle({
        ...boxStyle,
        backgroundColor: value
      });
    };
    return (
      <div>
        <input
          type="color"
          onChange={(e) => onChangeColor(e)}
          style={{ marginBottom: "20px", width: "300px" }}
        />

        <div style={newStyle}></div>
      </div>
    );
  }
);

// use it as you normally would
render(<MyColor color="red" width={300} height={200} >, el)

vue api react javascript programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Top 10 API Security Threats Every API Team Should Know

Learn what are the most important API security threats engineering leaders should be aware of and steps you can take to prevent them

Barcode Components for JavaScript, Angular, React, and Vue

In this article, we will examine the new barcode components available in the Wijmo 2020 v2 release. Barcodes represent data in a visual, but machine-readable way. Let's take a look at each of the new barcode components.

Public ASX100 APIs: The Essential List

The method used for this initial research was to obtain a list of the ASX100 (as of 18 September 2020). Then work through each company looking at the following

Trying React.js For The First Time | React.js For Vue Developers!

In this video I look at React.js as a Vue.js developer. What thinks confuse me, What thinks are interesting? How does props work in React vs Vue.