fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
1.9 KiB
1.9 KiB
category
| category |
|---|
| @Integrations |
useChangeCase
Reactive wrapper for change-case.
Subsitutes useCamelCase, usePascalCase, useSnakeCase, useSentenceCase, useCapitalize, etc.
Install
npm i change-case@^5
Usage
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
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
Type Declarations
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>;