diff --git a/packages/torph/TEXTMORPH.md b/packages/torph/TEXTMORPH.md new file mode 100644 index 0000000..10845b6 --- /dev/null +++ b/packages/torph/TEXTMORPH.md @@ -0,0 +1,115 @@ +# TextMorph API Reference + +## Types + +### TextMorphOptions + +```typescript +interface TextMorphOptions { + element: HTMLElement; + locale?: Intl.LocalesArgument; // default: "en" + duration?: number; // default: 400 (ms) + ease?: string; // default: "cubic-bezier(0.19, 1, 0.22, 1)" + debug?: boolean; // default: false +} +``` + +## Core API + +### TextMorph Class + +```typescript +class TextMorph { + constructor(options: TextMorphOptions) + update(value: string): void + destroy(): void +} +``` + +## React + +### TextMorph Component + +```typescript +interface TextMorphProps extends Omit { + children: string; +} +``` + +```tsx +import { TextMorph } from 'torph/react'; + + + {text} + +``` + +### useTextMorph Hook + +```typescript +function useTextMorph( + props: Omit +): { + ref: React.RefObject; + update: (text: string) => void; +} +``` + +```tsx +import { useTextMorph } from 'torph/react'; + +const { ref, update } = useTextMorph({ duration: 400 }); +``` + +## Vue + +```typescript +interface TextMorphProps extends Omit { + text: string; +} +``` + +```vue + + + +``` + +## Svelte + +```typescript +interface TextMorphProps extends Omit { + text: string; + locale?: Intl.LocalesArgument; + duration?: number; + ease?: string; + debug?: boolean; +} +``` + +```svelte + + + +``` + +## Vanilla JS + +```javascript +import { TextMorph } from 'torph'; + +const morph = new TextMorph({ + element: document.getElementById('morph'), + duration: 400, + locale: 'en' +}); + +morph.update('Hello World'); +morph.destroy(); +```