Veact

Mutable state enhancer library for React based on @vue/reactivity, with limited interoperability.

Who is using this library 🔥

• veact-admin A CMS admin by react & veact
• veact-use Veact hooks.
• ...

Installation

npm install veact --save

yarn add veact

Usage

Lifecycle

import React from 'react'
import { onMounted, onBeforeUnmount, onUpdated } from 'veact'

export const Component: React.FC = () => {
  onMounted(() => {
    console.log('component mounted')
  })

  onUpdated(() => {
    console.log('component updated')
  })

  onBeforeUnmount(() => {
    console.log('component will unmount')
  })

  return <div>component</div>
}

Base

import React from 'react'
import { useRef } from 'veact'

export const Component: React.FC = () => {
  const count = useRef(0)
  const increment = () => {
    count.value++
  }

  return (
    <div>
      <span>{count.value}</span>
      <button onClick={increment}>increment</button>
    </div>
  )
}

Reactivity

transform any reactivity object to reactivity hook.

import React from 'react'
import { ref, useReactivity } from 'veact'

// reactivity ref
const countRef = ref(0)

export const Component: React.FC = () => {
  // to reactivity hook
  const count = useReactivity(() => countRef)
  const increment = () => {
    count.value++
  }

  return (
    <div>
      <span>{count.value}</span>
      <button onClick={increment}>increment</button>
    </div>
  )
}

Watch

import React from 'react'
import { useReactive, useWatch } from 'veact'

export const Component: React.FC = () => {
  const data = useReactive({
    count: 0,
  })

  const increment = () => {
    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>
      <button onClick={increment}>increment</button>
    </div>
  )
}

Computed

import React from 'react'
import { useReactive, useComputed } from 'veact'

export const Component: React.FC = () => {
  const data = useReactive({
    count: 4,
    year: 3,
  })

  const total = useComputed(() => {
    return data.count * data.year
  })

  const incrementCount = () => {
    data.count++
  }

  return (
    <div>
      <span>{total.value}</span>
      <button onClick={incrementCount}>incrementCount</button>
    </div>
  )
}

Enhancer

import React from 'react'
import { useReactive, onMounted, batchedUpdates } from 'veact'

export const Component: React.FC = () => {
  const data = useReactive({
    count: 0,
    list: [],
  })

  const fetch = () => {
    fetchData().then((result) => {
      batchedUpdates(() => {
        data.count = result.count
        data.list = result.list
      })
    })
  }

  onMounted(() => {
    fetch()
  })

  return <div>{data.count}</div>
}

API

import {
  // Veact APIs

  // lifecycle
  onMounted,
  onBeforeUnmount,
  onUpdated,

  // data
  useRef,
  useShallowRef,
  useReactive,
  useShallowReactive,
  useComputed,

  // watch
  watch,
  useWatch,
  watchEffect,
  useWatchEffect,

  // enhancer
  useReactivity, // any object data to reactivity data
  batchedUpdates, // batchedUpdates === ReactDOM.unstable_batchedUpdates

  // @vue/reactivity APIs
  ref,
  reactive,
  computed,
  // ...
} from 'veact'

Development

# install dependencies
yarn

# lint
yarn lint

# test
yarn test

# build
yarn build

Changelog

Detailed changes for each release are documented in the release notes.

License

Licensed under the MIT License.