{"id":27211984,"url":"https://github.com/spyshiv/dummytextjs","last_synced_at":"2025-10-20T03:05:39.083Z","repository":{"id":84483926,"uuid":"45570904","full_name":"spyshiv/dummytextjs","owner":"spyshiv","description":"A plug-and-play dummy content generator for words, sentences, and paragraphs — with built-in auto-injection for Vue, React, and Angular apps using HTML data attributes.","archived":false,"fork":false,"pushed_at":"2025-04-08T19:46:32.000Z","size":95,"stargazers_count":9,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T19:52:40.773Z","etag":null,"topics":["data-dummy","english","generator","javascript","js-library","lorem-ipsum","npm","paragraph","word"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/dummytextjs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spyshiv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2015-11-04T22:14:01.000Z","updated_at":"2025-04-08T19:45:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"bc017af7-02e7-4e24-a42b-facd95fa7dcd","html_url":"https://github.com/spyshiv/dummytextjs","commit_stats":null,"previous_names":["spyshiv/dummytextjs"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spyshiv%2Fdummytextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spyshiv%2Fdummytextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spyshiv%2Fdummytextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spyshiv%2Fdummytextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spyshiv","download_url":"https://codeload.github.com/spyshiv/dummytextjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248142939,"owners_count":21054671,"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":["data-dummy","english","generator","javascript","js-library","lorem-ipsum","npm","paragraph","word"],"created_at":"2025-04-10T01:56:07.637Z","updated_at":"2025-10-20T03:05:34.055Z","avatar_url":"https://github.com/spyshiv.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 💻 📝 dummytextjs\n\n**dummytextjs** is a lightweight utility for generating realistic dummy text (words, sentences, or paragraphs) for development and testing. It also supports the automatic injection of dummy content into HTML elements via the `data-dummy` attribute.\n\n---\n\n## 🚀 Features\n\n- 🔤 Generate random words, sentences, and paragraphs.\n- ⚡ Auto-inject dummy content into HTML elements using `data-dummy`.\n- ✅ Framework-agnostic – works with **Vue**, **React**, **Angular**, and vanilla JS.\n- 💡 TypeScript support out of the box.\n- 📦 Lightweight and zero dependencies.\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install dummytextjs\n```\n\n---\n\n## ✨ Usage\n\n### 📥 Import API\n\n```ts\nimport {\n  generateWords,\n  generateSentences,\n  generateParagraphs,\n  autoInjectDummyContent\n} from \"dummytextjs\";\n```\n\n---\n\n## 🧩 Framework Usage Examples\n\n### ✅ Vue\n\n#### Manual\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e{{ dummyText }}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref, onMounted } from \"vue\";\nimport { generateWords } from \"dummytextjs\";\n\nconst dummyText = ref(\"\");\n\nonMounted(() =\u003e {\n  dummyText.value = generateWords(10);\n});\n\u003c/script\u003e\n```\n\n#### Auto Inject\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv data-dummy=\"3p\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { onMounted } from \"vue\";\nimport { autoInjectDummyContent } from \"dummytextjs\";\n\nonMounted(() =\u003e {\n  autoInjectDummyContent();\n});\n\u003c/script\u003e\n```\n\n---\n\n### ⚛️ React\n\n#### Manual\n\n```tsx\nimport React, { useEffect, useState } from \"react\";\nimport { generateSentences } from \"dummytextjs\";\n\nfunction App() {\n  const [text, setText] = useState(\"\");\n\n  useEffect(() =\u003e {\n    setText(generateSentences(5));\n  }, []);\n\n  return \u003cdiv\u003e{text}\u003c/div\u003e;\n}\n\nexport default App;\n```\n\n#### Auto Inject\n\n```tsx\nimport React, { useEffect } from \"react\";\nimport { autoInjectDummyContent } from \"dummytextjs\";\n\nfunction App() {\n  useEffect(() =\u003e {\n    autoInjectDummyContent();\n  }, []);\n\n  return (\n    \u003cdiv\u003e\n      \u003ch2 data-dummy=\"2s\"\u003e\u003c/h2\u003e\n      \u003cp data-dummy=\"3p\"\u003e\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n---\n\n### 🅰️ Angular\n\n#### Manual\n\n```ts\nimport { Component, OnInit } from \"@angular/core\";\nimport { generateParagraphs } from \"dummytextjs\";\n\n@Component({\n  selector: \"app-dummy\",\n  template: `\u003cdiv [innerHTML]=\"dummyText\"\u003e\u003c/div\u003e`\n})\nexport class DummyComponent implements OnInit {\n  dummyText = \"\";\n\n  ngOnInit(): void {\n    this.dummyText = generateParagraphs(2);\n  }\n}\n```\n\n#### Auto Inject\n\n```ts\nimport { Component, AfterViewInit } from \"@angular/core\";\nimport { autoInjectDummyContent } from \"dummytextjs\";\n\n@Component({\n  selector: \"app-auto-dummy\",\n  template: `\u003cdiv data-dummy=\"5p\"\u003e\u003c/div\u003e`\n})\nexport class AutoDummyComponent implements AfterViewInit {\n  ngAfterViewInit(): void {\n    autoInjectDummyContent();\n  }\n}\n```\n\n---\n\n## 🔠 `data-dummy` Attribute Syntax\n\nThe `data-dummy` attribute supports the following formats:\n\n| Syntax | Meaning      |\n| ------ | ------------ |\n| `5w`   | 5 words      |\n| `3s`   | 3 sentences  |\n| `2p`   | 2 paragraphs |\n\nThese values can be used to instruct `autoInjectDummyContent()` to dynamically replace the elements' content.\n\n---\n\n## 📘 API Reference\n\n### `generateWords(count: number): string`\n\nGenerates the specified number of random words.\n\n### `generateSentences(count: number): string`\n\nGenerates the specified number of random sentences.\n\n### `generateParagraphs(count: number): string`\n\nGenerates the specified number of random paragraphs.\n\n### `autoInjectDummyContent(): void`\n\nAutomatically finds elements with the `data-dummy` attribute and injects dummy text into them.\n\n---\n\n## 🛠 Example HTML (Vanilla JS)\n\n```html\n\u003cbody\u003e\n  \u003ch1 data-dummy=\"2s\"\u003e\u003c/h1\u003e\n  \u003cp data-dummy=\"1p\"\u003e\u003c/p\u003e\n\n  \u003cscript type=\"module\"\u003e\n    import { autoInjectDummyContent } from \"dummytextjs\";\n\n    autoInjectDummyContent();\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n---\n\n## 📄 License\n\nMIT\n\n---\n\n## ✨ Author\n\nCreated with 💻 by [@spyshiv](https://github.com/spyshiv)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspyshiv%2Fdummytextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspyshiv%2Fdummytextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspyshiv%2Fdummytextjs/lists"}