| computed | ramda-reactive |
|---|---|
computed(() => map(inc, xs.value) |
useMap(inc, xs) |
computed(() => filter(lte(5), xs.value) |
useFilter(lte(5), xs) |
computed(() => foo.value || bar.value) |
useOr(foo, bar) |
- no
.valueeverywhere - no
computed(() => - less visual clutter
Simple reactive filtering
import { ref } from 'vue'
import { useFilter } from 'ramda-reactive'
import { lt, __ } from 'ramda'
const xs = ref([1, 2, 3, 4])
const below3 = useFilter(lt(__, 3), xs)
// below3.value = [1, 2]
xs.value = [1, 1, 5]
// below3.value = [1, 1]
xs.value.push(1)
// below3.value = [1, 1, 1]Advanced reactive filtering
import { ref } from 'vue'
import { useFilter, useLt } from 'ramda-reactive'
import { __ } from 'ramda'
const xs = ref([1, 2, 3, 4])
const threshold = ref(4)
const lessThanThreshold = useLt(__, threshold)
const belowSomething = useFilter(lessThanThreshold, xs)
// belowSomething.value = [ 1, 2, 3 ]
threshold.value = 3
// belowSomething.value = [ 1, 2 ]
xs.value = [0, 1, 2, 3, 4]
// belowSomething.value = [ 0, 1, 2]useCall to reactively call non reactive function
import { ref } from 'vue'
import { useCall } from 'ramda-reactive'
const add = (a, b) => a + b
const foo = ref(1)
const bar = ref(2)
const result = useCall(add, foo, bar)
// result.value = 3
foo.value = 3
// result.value = 5Properties on reactive objects can also be used (similar to vues watch)
import { ref, reactive } from 'vue'
import { useAdd } from 'ramda-reactive'
const foo = ref(1)
const bar = reactive({ count: 2 })
const result = useAdd(foo, () => bar.count)
// result.value = 3
foo.value = 3
// result.value = 5
bar.count = 5
// result.value = 8👤 Tim Kutscha
- Github: @tikudev
Give a ⭐️ if this project helped you!
Copyright © 2023 Tim Kutscha.
This project is MIT licensed.