https://github.com/spyshiv/dummytextjs
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.
https://github.com/spyshiv/dummytextjs
data-dummy english generator javascript js-library lorem-ipsum npm paragraph word
Last synced: 8 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/spyshiv/dummytextjs
- Owner: spyshiv
- License: mit
- Created: 2015-11-04T22:14:01.000Z (over 10 years ago)
- Default Branch: main
- Last Pushed: 2025-04-08T19:46:32.000Z (about 1 year ago)
- Last Synced: 2025-04-08T19:52:40.773Z (about 1 year ago)
- Topics: data-dummy, english, generator, javascript, js-library, lorem-ipsum, npm, paragraph, word
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/dummytextjs
- Size: 92.8 KB
- Stars: 9
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💻 📝 dummytextjs
**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.
---
## 🚀 Features
- 🔤 Generate random words, sentences, and paragraphs.
- ⚡ Auto-inject dummy content into HTML elements using `data-dummy`.
- ✅ Framework-agnostic – works with **Vue**, **React**, **Angular**, and vanilla JS.
- 💡 TypeScript support out of the box.
- 📦 Lightweight and zero dependencies.
---
## 📦 Installation
```bash
npm install dummytextjs
```
---
## ✨ Usage
### 📥 Import API
```ts
import {
generateWords,
generateSentences,
generateParagraphs,
autoInjectDummyContent
} from "dummytextjs";
```
---
## 🧩 Framework Usage Examples
### ✅ Vue
#### Manual
```vue
{{ dummyText }}
import { ref, onMounted } from "vue";
import { generateWords } from "dummytextjs";
const dummyText = ref("");
onMounted(() => {
dummyText.value = generateWords(10);
});
```
#### Auto Inject
```vue
import { onMounted } from "vue";
import { autoInjectDummyContent } from "dummytextjs";
onMounted(() => {
autoInjectDummyContent();
});
```
---
### ⚛️ React
#### Manual
```tsx
import React, { useEffect, useState } from "react";
import { generateSentences } from "dummytextjs";
function App() {
const [text, setText] = useState("");
useEffect(() => {
setText(generateSentences(5));
}, []);
return
{text};
}
export default App;
```
#### Auto Inject
```tsx
import React, { useEffect } from "react";
import { autoInjectDummyContent } from "dummytextjs";
function App() {
useEffect(() => {
autoInjectDummyContent();
}, []);
return (
);
}
export default App;
```
---
### 🅰️ Angular
#### Manual
```ts
import { Component, OnInit } from "@angular/core";
import { generateParagraphs } from "dummytextjs";
@Component({
selector: "app-dummy",
template: `
`
})
export class DummyComponent implements OnInit {
dummyText = "";
ngOnInit(): void {
this.dummyText = generateParagraphs(2);
}
}
```
#### Auto Inject
```ts
import { Component, AfterViewInit } from "@angular/core";
import { autoInjectDummyContent } from "dummytextjs";
@Component({
selector: "app-auto-dummy",
template: `
`
})
export class AutoDummyComponent implements AfterViewInit {
ngAfterViewInit(): void {
autoInjectDummyContent();
}
}
```
---
## 🔠 `data-dummy` Attribute Syntax
The `data-dummy` attribute supports the following formats:
| Syntax | Meaning |
| ------ | ------------ |
| `5w` | 5 words |
| `3s` | 3 sentences |
| `2p` | 2 paragraphs |
These values can be used to instruct `autoInjectDummyContent()` to dynamically replace the elements' content.
---
## 📘 API Reference
### `generateWords(count: number): string`
Generates the specified number of random words.
### `generateSentences(count: number): string`
Generates the specified number of random sentences.
### `generateParagraphs(count: number): string`
Generates the specified number of random paragraphs.
### `autoInjectDummyContent(): void`
Automatically finds elements with the `data-dummy` attribute and injects dummy text into them.
---
## 🛠 Example HTML (Vanilla JS)
```html
import { autoInjectDummyContent } from "dummytextjs";
autoInjectDummyContent();
```
---
## 📄 License
MIT
---
## ✨ Author
Created with 💻 by [@spyshiv](https://github.com/spyshiv)