Skip to content
On this page

useChangeCase

Category
Export Size
447 B
Package
@vueuse/integrations
Last Changed
8 months ago

Reactive wrapper for change-case.

Demo

"helloWorld"
Available in the @vueuse/integrations add-on.

Install

bash
npm i change-case
npm i change-case

Usage

ts
import { useChangeCase } from '@vueuse/integrations/useChangeCase'

// `changeCase` will be a computed
const changeCase = useChangeCase('hello world', 'camelCase')
changeCase.value // helloWorld
changeCase.value = 'vue use'
changeCase.value // vueUse
// Supported methods
// export {
//   camelCase,
//   capitalCase,
//   constantCase,
//   dotCase,
//   headerCase,
//   noCase,
//   paramCase,
//   pascalCase,
//   pathCase,
//   sentenceCase,
//   snakeCase,
// } from 'change-case'
import { useChangeCase } from '@vueuse/integrations/useChangeCase'

// `changeCase` will be a computed
const changeCase = useChangeCase('hello world', 'camelCase')
changeCase.value // helloWorld
changeCase.value = 'vue use'
changeCase.value // vueUse
// Supported methods
// export {
//   camelCase,
//   capitalCase,
//   constantCase,
//   dotCase,
//   headerCase,
//   noCase,
//   paramCase,
//   pascalCase,
//   pathCase,
//   sentenceCase,
//   snakeCase,
// } from 'change-case'

or passing a ref to it, the returned computed will change along with the source ref's changes.

Can be passed into options for customization

ts
import { ref } from 'vue-demi'
import { useChangeCase } from '@vueuse/integrations/useChangeCase'
const input = ref('helloWorld')
const changeCase = useChangeCase(input, 'camelCase', {
  delimiter: '-',
})
changeCase.value // hello-World
ref.value = 'vue use'
changeCase.value // vue-Use
import { ref } from 'vue-demi'
import { useChangeCase } from '@vueuse/integrations/useChangeCase'
const input = ref('helloWorld')
const changeCase = useChangeCase(input, 'camelCase', {
  delimiter: '-',
})
changeCase.value // hello-World
ref.value = 'vue use'
changeCase.value // vue-Use

Type Declarations

typescript
export type ChangeCaseType = keyof typeof changeCase
export declare function useChangeCase(
  input: MaybeRef<string>,
  type: ChangeCaseType,
  options?: Options | undefined
): WritableComputedRef<string>
export declare function useChangeCase(
  input: MaybeComputedRef<string>,
  type: ChangeCaseType,
  options?: Options | undefined
): ComputedRef<string>
export type ChangeCaseType = keyof typeof changeCase
export declare function useChangeCase(
  input: MaybeRef<string>,
  type: ChangeCaseType,
  options?: Options | undefined
): WritableComputedRef<string>
export declare function useChangeCase(
  input: MaybeComputedRef<string>,
  type: ChangeCaseType,
  options?: Options | undefined
): ComputedRef<string>

Source

SourceDemoDocs

Contributors

Anthony Fu
sun0day
Curt Grimes
马灿

Changelog

v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.0.0-beta.3 on 3/8/2022
a98e5 - feat(integrations): add useChangeCase (#1371)

Released under the MIT License.