1---
2category: '@Integrations'
3---
4 
5# useChangeCase
6 
7Reactive wrapper for [`change-case`](https://github.com/blakeembrey/change-case).
8 
9Subsitutes `useCamelCase`, `usePascalCase`, `useSnakeCase`, `useSentenceCase`, `useCapitalize`, etc.
10 
11## Install
12 
13```bash
14npm i change-case@^5
15```
16 
17## Usage
18 
19```ts
20import { useChangeCase } from '@vueuse/integrations/useChangeCase'
21 
22// `changeCase` will be a computed
23const changeCase = useChangeCase('hello world', 'camelCase')
24changeCase.value // helloWorld
25changeCase.value = 'vue use'
26changeCase.value // vueUse
27// Supported methods
28// export {
29//   camelCase,
30//   capitalCase,
31//   constantCase,
32//   dotCase,
33//   headerCase,
34//   noCase,
35//   paramCase,
36//   pascalCase,
37//   pathCase,
38//   sentenceCase,
39//   snakeCase,
40// } from 'change-case'
41```
42 
43or passing a `ref` to it, the returned `computed` will change along with the source ref's changes.
44 
45Can be passed into `options` for customization
46 
47```ts
48import { useChangeCase } from '@vueuse/integrations/useChangeCase'
49import { shallowRef } from 'vue'
50 
51const input = shallowRef('helloWorld')
52const changeCase = useChangeCase(input, 'camelCase', {
53  delimiter: '-',
54})
55changeCase.value // hello-World
56input.value = 'vue use'
57changeCase.value // vue-Use
58```
59 
60## Type Declarations
61 
62```ts
63type EndsWithCase<T> = T extends `${infer _}Case` ? T : never
64type FilterKeys<T> = {
65  [K in keyof T as K extends string ? K : never]: EndsWithCase<K>
66}
67type ChangeCaseKeys = FilterKeys<typeof changeCase>
68export type ChangeCaseType = ChangeCaseKeys[keyof ChangeCaseKeys]
69export declare function useChangeCase(
70  input: MaybeRef<string>,
71  type: MaybeRefOrGetter<ChangeCaseType>,
72  options?: MaybeRefOrGetter<Options> | undefined,
73): WritableComputedRef<string>
74export declare function useChangeCase(
75  input: MaybeRefOrGetter<string>,
76  type: MaybeRefOrGetter<ChangeCaseType>,
77  options?: MaybeRefOrGetter<Options> | undefined,
78): ComputedRef<string>
79```
80