useChangeCase

change-case のリアクティブラッパー。

useCamelCase、usePascalCase、useSnakeCase、useSentenceCase、useCapitalize などを代替します。

インストール

npm i change-case@^5

使用方法

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

// `changeCase` は computed になります
const changeCase = useChangeCase('hello world', 'camelCase')
changeCase.value // helloWorld
changeCase.value = 'vue use'
changeCase.value // vueUse
// サポートされているメソッド
// export {
//   camelCase,
//   capitalCase,
//   constantCase,
//   dotCase,
//   headerCase,
//   noCase,
//   paramCase,
//   pascalCase,
//   pathCase,
//   sentenceCase,
//   snakeCase,
// } from 'change-case'

または ref を渡すことで、返される computed は元の ref の変更に応じて変化します。

カスタマイズのために options を渡すことができます。

import { useChangeCase } from '@vueuse/integrations/useChangeCase'
import { shallowRef } from 'vue'

const input = shallowRef('helloWorld')
const changeCase = useChangeCase(input, 'camelCase', {
  delimiter: '-',
})
changeCase.value // hello-World
input.value = 'vue use'
changeCase.value // vue-Use