{"id":22789149,"url":"https://github.com/deepakb/typecraft-fx","last_synced_at":"2025-03-30T16:25:53.057Z","repository":{"id":259462813,"uuid":"869384883","full_name":"deepakb/typecraft-fx","owner":"deepakb","description":"WIP: TypecraftFX is a feature-rich library that brings dynamic typing animations to your web projects.","archived":false,"fork":false,"pushed_at":"2024-10-25T16:19:23.000Z","size":380,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-25T17:52:57.113Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deepakb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-08T07:54:53.000Z","updated_at":"2024-10-24T09:05:31.000Z","dependencies_parsed_at":"2024-10-25T17:53:59.950Z","dependency_job_id":"fc19ca5a-cd0a-4854-828b-209a7fb71e44","html_url":"https://github.com/deepakb/typecraft-fx","commit_stats":null,"previous_names":["deepakb/typecraft-fx"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepakb%2Ftypecraft-fx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepakb%2Ftypecraft-fx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepakb%2Ftypecraft-fx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deepakb%2Ftypecraft-fx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deepakb","download_url":"https://codeload.github.com/deepakb/typecraft-fx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246345156,"owners_count":20762337,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-12T01:44:02.142Z","updated_at":"2025-03-30T16:25:52.989Z","avatar_url":"https://github.com/deepakb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TypecraftFX\n\nA powerful and flexible typecraft effect library for React applications.\n\n## Introduction\n\nTypecraftFX is a feature-rich library that brings dynamic typing animations to your web projects. It offers seamless integration with React applications and can also be used with vanilla JavaScript. The library provides a wide range of customization options, including various text effects, cursor styles, and typing speeds. Whether you're creating an interactive landing page, a creative portfolio, or just want to add some flair to your text content, TypecraftFX has you covered.\n\n## Features\n\n- **Dynamic Typing**: Simulate realistic typing with customizable speed and delays.\n- **Text Effects**: Choose from various text effects including fade-in, slide-in, and rainbow.\n- **Cursor Customization**: Customize cursor style, color, and blinking behavior.\n- **Bi-directional Support**: Support for both left-to-right (LTR) and right-to-left (RTL) text.\n- **Flexible API**: Easy-to-use API for chaining multiple typing actions.\n- **React Integration**: Seamless integration with React applications.\n- **Lazy Loading**: Option for lazy loading to improve performance.\n- **TypeScript Support**: Full TypeScript support for type safety and better developer experience.\n- **Customizable Callbacks**: Hook into various events during the typing process.\n- **Pause and Resume**: Ability to pause and resume typing animations.\n- **Loop Functionality**: Option to loop through typing sequences.\n\n## Installation\n\nYou can install TypecraftFX using npm:\n\n```bash\nnpm install typecraft-fx\n```\n\nFor those who prefer to use a CDN, you can include the following script tag in your HTML file:\n\n```html\n\u003cscript src=\"https://unpkg.com/typecraft-fx/dist/typecraft-fx.min.js\"\u003e\u003c/script\u003e\n```\n\nNote: Replace `@latest` with a specific version number if you want to use a particular version of the library.\n\n## Usage\n\n### Basic Usage with React\n\n### Eager Loading (smaller bundle, no code splitting)\n\n```jsx\nimport { Typecraft } from 'typecraft-fx';\n```\n\n### Lazy Loading (larger initial bundle, but with code splitting)\n\n```jsx\nimport { TypecraftFX } from 'typecraft-fx';\n```\n\n```jsx\nimport React from 'react';\nimport { TypecraftFX } from 'typecraft-fx';\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cTypecraftFX\n      onInit={(typecraft) =\u003e {\n        typecraft\n          .typeString('Hello World!')\n          .pauseFor(2000)\n          .deleteAll()\n          .typeString('Welcome to TypecraftFX')\n          .start();\n      }}\n    /\u003e\n  );\n};\n\nexport default MyComponent;\n```\n\n### Advanced Usage with Custom Options\n\n```jsx\nimport React from 'react';\nimport { TypecraftFX, TextEffect, CursorStyle } from 'typecraft-fx';\n\nconst AdvancedComponent = () =\u003e {\n  return (\n    \u003cTypecraftFX\n      options={{\n        strings: ['First sentence.', 'Second sentence.'],\n        autoStart: true,\n        loop: true,\n        deleteSpeed: 50,\n        delay: 100,\n      }}\n      onInit={(typecraft) =\u003e {\n        typecraft\n          .setTextEffect(TextEffect.FadeIn)\n          .typeString('This text will fade in.')\n          .pauseFor(1000)\n          .deleteAll()\n          .changeCursorStyle(CursorStyle.Blink)\n          .typeString('Blinking cursor!')\n          .start();\n      }}\n    /\u003e\n  );\n};\n\nexport default AdvancedComponent;\n```\n\n### Usage with Vanilla JavaScript\n\nIf you're not using React, you can still use TypecraftFX with vanilla JavaScript:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eTypecraftFX Demo\u003c/title\u003e\n    \u003cscript src=\"https://unpkg.com/typecraft-fx@latest/dist/typecraft-fx.umd.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"typecraft\"\u003e\u003c/div\u003e\n\n    \u003cscript\u003e\n      document.addEventListener('DOMContentLoaded', function () {\n        const element = document.getElementById('typecraft');\n        const typecraft = new Typecraft(element, {\n          loop: true,\n          delay: 75,\n        });\n\n        typecraft\n          .typeString('Hello World!')\n          .pauseFor(1000)\n          .deleteAll()\n          .typeString('Welcome to TypecraftFX')\n          .pauseFor(1000)\n          .start();\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## API Reference\n\n### TypecraftFX Props\n\n| Prop               | Type                             | Description                                             |\n| ------------------ | -------------------------------- | ------------------------------------------------------- |\n| `onInit`           | `(typecraft: Typecraft) =\u003e void` | Callback function that receives the Typecraft instance. |\n| `options`          | `Partial\u003cTypecraftOptions\u003e`      | Configuration options for the Typecraft.                |\n| `onTypeStart`      | `EventCallback`                  | Callback fired when typing starts.                      |\n| `onTypeChar`       | `EventCallback`                  | Callback fired when a character is typed.               |\n| `onTypeComplete`   | `EventCallback`                  | Callback fired when typing is complete.                 |\n| `onDeleteStart`    | `EventCallback`                  | Callback fired when deletion starts.                    |\n| `onDeleteChar`     | `EventCallback`                  | Callback fired when a character is deleted.             |\n| `onDeleteComplete` | `EventCallback`                  | Callback fired when deletion is complete.               |\n| `onPauseStart`     | `EventCallback`                  | Callback fired when a pause starts.                     |\n| `onPauseEnd`       | `EventCallback`                  | Callback fired when a pause ends.                       |\n| `onComplete`       | `EventCallback`                  | Callback fired when all actions are complete.           |\n\n### Typecraft Methods\n\n| Method                     | Description                                      |\n| -------------------------- | ------------------------------------------------ |\n| `typeString(string)`       | Types out the given string.                      |\n| `deleteChars(number)`      | Deletes the specified number of characters.      |\n| `deleteAll()`              | Deletes all characters.                          |\n| `pauseFor(ms)`             | Pauses for the specified number of milliseconds. |\n| `start()`                  | Starts the typecraft effect.                     |\n| `stop()`                   | Stops the typecraft effect.                      |\n| `changeCursorStyle(style)` | Changes the cursor style.                        |\n| `setTextEffect(effect)`    | Changes the text effect.                         |\n\n### TypecraftOptions\n\n| Option        | Type                     | Default                          | Description                                     |\n| ------------- | ------------------------ | -------------------------------- | ----------------------------------------------- |\n| `strings`     | `string[]`               | `[]`                             | Array of strings to type out.                   |\n| `autoStart`   | `boolean`                | `false`                          | Whether to start typing automatically.          |\n| `loop`        | `boolean`                | `false`                          | Whether to loop the typing sequence.            |\n| `deleteSpeed` | `number`                 | `50`                             | Speed of deletion in milliseconds.              |\n| `delay`       | `number`                 | `1500`                           | Delay between typing sequences in milliseconds. |\n| `cursor`      | `Partial\u003cCursorOptions\u003e` | `{ text: '\\|', color: 'black' }` | Cursor options.                                 |\n| `cursorStyle` | `CursorStyle`            | `CursorStyle.Solid`              | Style of the cursor.                            |\n| `textEffect`  | `TextEffect`             | `TextEffect.None`                | Text effect to apply.                           |\n\n### Development Setup\n\nTo set up the project for development:\n\n1. Clone the repository\n2. Install dependencies with `npm install`\n3. Run tests with `npm test`\n4. Start the development server with `npm run dev`\n\n## License\n\nTypecraftFX is open-source software licensed under the MIT license. See the [LICENSE](LICENSE) file for more details.\n\n## Support\n\nIf you encounter any issues or have questions, please file an issue on the [GitHub issue tracker](https://github.com/deepakb/typecraft-fx/issues) libraries.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepakb%2Ftypecraft-fx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeepakb%2Ftypecraft-fx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepakb%2Ftypecraft-fx/lists"}