- Notifications
You must be signed in to change notification settings - Fork4
Mutable state enhancer library for React based on @vue/reactivity
License
NotificationsYou must be signed in to change notification settings
veactjs/veact
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A mutable state enhancer library forReact, built on top of@vue/reactivity.
If you’re frustrated with the repetitive task of definingprops,emits,slots andattrs in Vue, sometimes struggling to keep track of types, and you value the simplicity of managing everything with interfaces in React, then Veact is for you. Veact effortlessly merges the low cognitive overhead of Vue’s mutable state with the robust type support and flexibility of React’s JSX. It strikes a perfect balance between the strengths of both frameworks, providing a near-flawless development experience—without the complexity and potential pitfalls of useEffect in React.
Veact embodies what I believe is the“best of both worlds”—a powerful, yet intuitive library crafted to simplify and enhance your front-end development experience and efficiency.
- veact-use Veact hooks.
- surmon.admin A CMS admin client forsurmon.me blog.
- ...
- API List
- Example: Lifecycle
- Example: Ref
- Example: ShallowRef
- Example: Reactive
- Example: Computed
- Example: Watch
- Example: EffectScope
- Example: Reactivity
# using npmnpm install veact --save# using yarnyarn add veact# using pnpmpnpm add veact
importReactfrom'react'import{onMounted,onBeforeUnmount,onUpdated}from'veact'exportconstComponent:React.FC=()=>{onMounted(()=>{console.log('component mounted')})onUpdated(()=>{console.log('component updated')})onBeforeUnmount(()=>{console.log('component will unmount')})return<div>component</div>}
importReactfrom'react'import{useRef}from'veact'exportconstComponent:React.FC=()=>{constcount=useRef(0)constincrement=()=>{count.value++}return(<div><p>{count.value}</p><buttononClick={increment}>increment</button></div>)}
importReactfrom'react'import{useShallowRef}from'veact'exportconstComponent:React.FC=()=>{constnumbers=useShallowRef([1,2,3])constresetNumbers=()=>{numbers.value=[]}return(<div><p>{numbers.value.length}</p><buttononClick={resetNumbers}>resetNumbers</button></div>)}
importReactfrom'react'import{useReactive}from'veact'exportconstComponent:React.FC=()=>{constdata=useReactive({count:10,nested:{count:1},})constincrementCount=()=>{data.count++}constincrementNestedCount=()=>{data.nested.count++}return(<div><p>{data.count}</p><p>{data.nested.count}</p><buttononClick={incrementCount}>incrementCount</button><buttononClick={incrementNestedCount}>incrementNestedCount</button></div>)}
importReactfrom'react'import{useReactive,useComputed}from'veact'exportconstComponent:React.FC=()=>{constdata=useReactive({year:3,count:4,})consttotal=useComputed(()=>{returndata.count*data.year})constincrementCount=()=>{data.count++}return(<div><span>{total.value}</span><buttononClick={incrementCount}>incrementCount</button></div>)}
importReactfrom'react'import{useReactive,useWatch}from'veact'exportconstComponent:React.FC=()=>{constdata=useReactive({count:0,})constincrementCount=()=>{data.count++}useWatch(data,(newData)=>{console.log('data changed',newData)})useWatch(()=>data.count,(newCount)=>{console.log('count changed',newCount)},)return(<div><span>{data.count}</span><buttononClick={incrementCount}>incrementCount</button></div>)}
importReactfrom'react'import{watch,useRef,useEffectScope,onScopeDispose}from'veact'exportconstComponent:React.FC=()=>{constscope=useEffectScope()constcounter=useRef(0)constincrementCounter=()=>{counter.value++}scope.run(()=>{constdoubled=computed(()=>counter.value*2)watch(doubled,(newValue)=>console.log(newValue))watchEffect(()=>console.log('doubled: ',doubled.value))onScopeDispose(()=>console.log('effect scope is stopped'))})return(<div><span>{counter.value}</span><buttononClick={incrementCounter}>incrementCounter</button><buttononClick={()=>scope.pause()}>pause Scope</button><buttononClick={()=>scope.resume()}>resume Scope</button><buttononClick={()=>scope.stop()}>stop Scope</button></div>)}
Converts some of the 'raw Vue' data, which is not already wrapped in a hook, into reactive hook data to ensure proper reactivity within the component.
importReactfrom'react'import{ref,useReactivity}from'veact'// ref data without hooksconstcountRef=ref(0)exportconstComponent:React.FC=()=>{// to reactivity hookconstcount=useReactivity(()=>countRef)constincrement=()=>{count.value++}return(<div><span>{count.value}</span><buttononClick={increment}>increment</button></div>)}
All APIs listed here are implemented and provided by Veact. For additional exported types, please refer toindex.ts.
Veact also re-exports all APIs from@vue/reactivity.
| Veact API | Corresponding Capability | Description |
|---|---|---|
onMounted | ReactcomponentDidMount() | The function is called right after the component is mounted. |
onUpdated | ReactcomponentDidUpdate() | The function is called immediately after the component is re-rendered with updated props or state. (This method is not invoked during the initial render.) |
onBeforeUnmount | ReactcomponentWillUnmount() | The function is called right before the component is unmounted. |
useRef | Vueref() | Takes an inner value and returns a reactive and mutable ref object, which has a single property.value that points to the inner value. |
useShallowRef | VueshallowRef() | Shallow version ofuseRef(). |
useCustomRef | VuecustomRef() | Creates a customized ref with explicit control over its dependency tracking and updates triggering. |
useReactive | Vuereactive() | Returns a reactive proxy of the object. |
useShallowReactive | VueshallowReactive() | Shallow version ofuseReactive(). |
useReadonly | Vuereadonly() | Takes an object (reactive or plain) or a ref and returns a readonly proxy to the original. |
useShallowReadonly | VueshallowReadonly() | Shallow version ofuseReadonly(). |
useComputed | Vuecomputed() | Takes a getter function and returns a readonly reactive ref object for the returned value from the getter. It can also take an object with get and set functions to create a writable ref object. |
watch | Vuewatch() | Watches one or more reactive data sources and invokes a callback function when the sources change. Unlike Vue (3.5.0), it does not support theoption.flush. |
useWatch | Vuewatch() | Same as above, this is the hook implementation ofwatch(). |
watchEffect | VuewatchEffect() | Runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed. Unlike Vue (3.5.0), it does not support theoption.flush. |
useWatchEffect | VuewatchEffect() | Same as above, this is the hook implementation ofwatchEffect(). |
useEffectScope | VueeffectScope() | UnlikeeffectScope in Vue,useEffectScope().run() will only execute once within the component and cannot contain any other hooks. |
useReactivity | Internal implementation in Veact | Converts some of the 'raw Vue' data, which is not already wrapped in a hook, into reactive hook data to ensure proper reactivity within the component. |
# install dependenciespnpm install# devpnpm run dev# lintpnpm run lint# testpnpm runtest# buildpnpm run build
Detailed changes for each release are documented in therelease notes.
Licensed under theMIT License.
About
Mutable state enhancer library for React based on @vue/reactivity