React-plus-vue NPM

Installation

to use react-plus-vue in your project, simply install it with npm or yarn.

npm

npm install --save react-plus-vue

yarn

yarn add react-plus-vue

Usage

import the elements

All of the elements have a prefix of 'V' (e.g instead of 'p' use 'Vp').

  import { Vp } from 'react-plus-vue';

  ...

  export default function MyReactVueComponent(){
    return <Vp>Hello World!</Vp>;
  }

now you can use some special features

special features

There are a few special features like vIf and vIfn:

import { Vp } from 'react-plus-vue';
import { useState } from 'react';

export default function MyReactVueComponent() {
  const [show, setShow] = useState(true);

  ...

  return <>
    <Vp vIf={show}>
      This will be shown only when show is true
    </Vp>
    <Vp vIfn={show}>
      This will be shown only when show is false
    </Vp>
    ...
  </>;
}

useVRef and useVShallowRef

The useVRef, useVShallowRef hooks are like the ref function in vue, to learn more, set the difference:

import { Vp, useVRef } from 'react-plus-vue';
import { useStaet } from 'react';

export default function MyReactVueComponent() {
  const show = useVRef(true);

  /*
  you can set 'show' just like in vue:
  show.value = false

  or, if the value that you are changing it to
  depends on the current value, then it's
  recommended to use the function version:

  show.value = val => !val
  */

  return (
    <>
      <Vp vIf={show.value}>This will be shown only when show.value is true</Vp>
      <Vp vIfn={show.value}>
        This will be shown only when show.value is false
      </Vp>
      ...
    </>
  );
}

Issues and Contributions

If you encounter any issues or have suggestions for improvements, please feel free to open an issue on the GitHub repository. Contributions are welcome!