useChangeCase

カテゴリ

@Integrations

エクスポートサイズ

385 B

パッケージ

@vueuse/integrations

最終変更日

先週

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

useCamelCase、usePascalCase、useSnakeCase、useSentenceCase、useCapitalizeなどを置き換えます。

デモ

ソース

camelCasecapitalCaseconstantCasedotCasekebabCasenoCasepascalCasepascalSnakeCasepathCasesentenceCasesnakeCasetrainCase

helloWorld

@vueuse/integrations アドオンで利用可能です。

インストール

bash

npm i change-case@^5

使用方法

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'

またはrefを渡すと、返されるcomputedはソースrefの変更とともに変更されます。

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

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

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

型宣言

typescript

type EndsWithCase<T> = T extends `${infer _}Case` ? T : never
type FilterKeys<T> = {
  [K in keyof T as K extends string ? K : never]: EndsWithCase<K>
}
type ChangeCaseKeys = FilterKeys<typeof changeCase>
export type ChangeCaseType = ChangeCaseKeys[keyof ChangeCaseKeys]
export declare function useChangeCase(
  input: MaybeRef<string>,
  type: MaybeRefOrGetter<ChangeCaseType>,
  options?: MaybeRefOrGetter<Options> | undefined,
): WritableComputedRef<string>
export declare function useChangeCase(
  input: MaybeRefOrGetter<string>,
  type: MaybeRefOrGetter<ChangeCaseType>,
  options?: MaybeRefOrGetter<Options> | undefined,
): ComputedRef<string>