react-vueable
Vue3 emulation API called in the react function component
✨ Features
- Most similar to Vue API, easy to learn and use
- Supports Vue reactive object, such as ref(), reactive()
- Written in TypeScript with predictable static types
📚 Homepage
📦 Install
$ npm install --save react-vueable
# or
$ yarn add react-vueable
# or
$ pnpm add react-vueable🔨 Usage
useReactive
import { useReactive } from 'react-vueable';
const state = useReactive<State>({ count: 0, msg: 'hello world!' });
state.count++;KeepAlive
import { KeepAlive } from 'react-vueable';
export default () => {
const [index, setIndex] = useState(0);
const Component = useMemo(
() => ({ 0: ComponentA, 1: ComponentB })[index]!,
[index],
);
return (
<KeepAlive>
<Component key={index} />
</KeepAlive>
);
};nextTick
import { useCallback, useState } from 'react';
import { useNextTick } from 'react-vueable';
export default () => {
const [count, setCount] = useState(0);
const nextTick = useNextTick();
const hanldeClick = useCallback(async () => {
setCount((prev) => prev + 1);
console.log(document.getElementById('count')?.innerText);
await nextTick();
console.log(document.getElementById('count')?.innerText);
}, []);
return (
<div>
<span id="count">{count}</span>
<button type="button" onClick={hanldeClick}>
count+1
</button>
</div>
);
};useWatch
import { useWatch } from 'react-vueable';
useWatch(
(newA, oldA) => {
console.log(`[watch] newA:${newA}; oldA:${oldA}`);
},
[a],
);LICENSE
MIT