1---
2category: Reactivity
3---
4 
5# reactivePick
6 
7Reactively pick fields from a reactive object.
8 
9## Usage
10 
11### Basic Usage
12 
13```ts
14import { reactivePick } from '@vueuse/core'
15 
16const obj = reactive({
17  x: 0,
18  y: 0,
19  elementX: 0,
20  elementY: 0,
21})
22 
23const picked = reactivePick(obj, 'x', 'elementX') // { x: number, elementX: number }
24```
25 
26### Predicate Usage
27 
28```ts
29import { reactivePick } from '@vueuse/core'
30 
31const source = reactive({
32  foo: 'foo',
33  bar: 'bar',
34  baz: 'baz',
35  qux: true,
36})
37const state = reactivePick(source, (value, key) => key !== 'bar' && value !== true)
38// { foo: string, baz: string }
39source.qux = false
40// { foo: string, baz: string, qux: boolean }
41```
42 
43### Scenarios
44 
45#### Selectively passing props to child
46 
47```vue
48<script setup lang="ts">
49import { reactivePick } from '@vueuse/core'
50 
51const props = defineProps<{
52  value: string
53  color?: string
54  font?: string
55}>()
56 
57const childProps = reactivePick(props, 'color', 'font')
58</script>
59 
60<template>
61  <div>
62    <!-- only passes "color" and "font" props to child -->
63    <ChildComp v-bind="childProps" />
64  </div>
65</template>
66```
67 
68#### Selectively wrap reactive object
69 
70Instead of doing this
71 
72```ts
73import { useElementBounding } from '@vueuse/core'
74import { reactive } from 'vue'
75 
76const { height, width } = useElementBounding() // object of refs
77const size = reactive({ height, width })
78```
79 
80Now we can just have this
81 
82```ts
83import { reactivePick, useElementBounding } from '@vueuse/core'
84 
85const size = reactivePick(useElementBounding(), 'height', 'width')
86```
87 
88## Type Declarations
89 
90```ts
91export type ReactivePickReturn<T extends object, K extends keyof T> = {
92  [S in K]: UnwrapRef<T[S]>
93}
94export type ReactivePickPredicate<T> = (
95  value: T[keyof T],
96  key: keyof T,
97) => boolean
98export declare function reactivePick<T extends object, K extends keyof T>(
99  obj: T,
100  ...keys: (K | K[])[]
101): ReactivePickReturn<T, K>
102export declare function reactivePick<T extends object>(
103  obj: T,
104  predicate: ReactivePickPredicate<T>,
105): ReactivePickReturn<T, keyof T>
106```
107