Npm Bundlephobia Coverage Typescript License Npm download
Valkit is a lightweight utility library designed to simplify value processing.
Supports React(16+), Vue(3+), and TypeScript.
In Vue Template's for loop, it's often necessary to process some values of item, for example:
<template> <div v-for="item in items" :key="item.id"> <img v-if="item.cover || item.image" :src="item.cover || item.image" /> <div>{{ item.name }}</div> </div> </template>
Valkit helps reuse value-processing code:
<template> <div v-for="item in items" :key="item.id"> <Valkit :value="item" :resolver="(item) => item.cover || item.image"> <template #default="{ value: cover }"> <img v-if="cover" :src="cover" /> <div>{{ item.name }}</div> </template> </Valkit> </div> </template>
valkit(value, resolver)valkitResolve(value, resolver)valkitIs(value, predicate)valkitSafe(value, fallback)
import { valkit, valkitResolve, valkitIs, valkitSafe } from 'valkit' valkit(1, (v) => v) // 1 valkit( () => 1, (v) => v ) // 1 valkitIs(1, (v) => v === 1) // true valkitSafe(1) // 1 valkitSafe(() => { throw new Error('test') }, 1) // 1
ValkitValkitResolve
import { Valkit } from 'valkit/react' const Component = () => <Valkit value={1} resolver={(v) => v} render={(v) => <div>{v}</div>} />
ValkitValkitResolve
<script setup> import { Valkit } from 'valkit/vue' </script> <template> <Valkit :value="1" :resolver="(v) => v"> <template #default="{ value }"> <div>{{ value }}</div> </template> </Valkit> </template>