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!

License

This package is licensed under the MIT License. See the LICENSE file for details.

Implemented Features of vue

• v-if (as vIf)
• shllowRef() (as useVShallowRef)
• ref() (as useVRef)

Extra features

• vIfn: like vIf but it renders only when then condition is false