https://github.com/unixzii/revue

A library for bridging React components to Vue.
https://github.com/unixzii/revue

bridge framework frontend javascript react vue web

Last synced: 15 days ago
JSON representation

A library for bridging React components to Vue.

• Host: GitHub
• URL: https://github.com/unixzii/revue
• Owner: unixzii
• License: mit
• Created: 2023-07-14T14:39:20.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-14T14:54:43.000Z (over 1 year ago)
• Last Synced: 2023-07-14T16:22:09.146Z (over 1 year ago)
• Topics: bridge, framework, frontend, javascript, react, vue, web
• Language: TypeScript
• Homepage: https://revue.vercel.app
• Size: 69.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# revue

A library for bridging React components to Vue.

> This library is currently a PoC, only for demostrating the possibility of using React components in Vue.

## Features

* Updates of React components are fully driven by reactivity.

* Single React root per Vue app, providing more friendly devtools experience.

* The context of a React component are synchronized within the Vue component tree. 

## Getting Started

First, define the bridge component (e.g. in `button.ts`):

```typescript

import { h } from 'vue';

import { Button } from '@nextui-org/react';

import { defineReactComponent } from 'revue';

export default defineReactComponent(Button, {

    onClick: Function,

}, {

    containerRender() {

        return h('div', {

            style: { display: 'inline-block' }

        });

    },

});

```

Since every React component must be mounted on a DOM element, you can customize the host element by specifying `containerRender`.

Then you can use your favorite React component in any Vue component:

```vue

  


    Say Hello

  


import Button from './button';  // Import the bridged component.

function sayHello() {

    console.log('Hello, world!');

}

```

## Example

Clone the repository, and run the following command to serve the example locally:

```bash

npm install

npm run dev

```

## License

MIT