Package Exports
- dummytextjs
- dummytextjs/dist/dummytextjs.es.js
- dummytextjs/dist/dummytextjs.umd.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dummytextjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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
npm install dummytextjs✨ Usage
📥 Import API
import {
generateWords,
generateSentences,
generateParagraphs,
autoInjectDummyContent
} from "dummytextjs";🧩 Framework Usage Examples
✅ Vue
Manual
<template>
<div>{{ dummyText }}</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { generateWords } from "dummytextjs";
const dummyText = ref("");
onMounted(() => {
dummyText.value = generateWords(10);
});
</script>Auto Inject
<template>
<div data-dummy="3p"></div>
</template>
<script setup>
import { onMounted } from "vue";
import { autoInjectDummyContent } from "dummytextjs";
onMounted(() => {
autoInjectDummyContent();
});
</script>⚛️ React
Manual
import React, { useEffect, useState } from "react";
import { generateSentences } from "dummytextjs";
function App() {
const [text, setText] = useState("");
useEffect(() => {
setText(generateSentences(5));
}, []);
return <div>{text}</div>;
}
export default App;Auto Inject
import React, { useEffect } from "react";
import { autoInjectDummyContent } from "dummytextjs";
function App() {
useEffect(() => {
autoInjectDummyContent();
}, []);
return (
<div>
<h2 data-dummy="2s"></h2>
<p data-dummy="3p"></p>
</div>
);
}
export default App;🅰️ Angular
Manual
import { Component, OnInit } from "@angular/core";
import { generateParagraphs } from "dummytextjs";
@Component({
selector: "app-dummy",
template: `<div [innerHTML]="dummyText"></div>`
})
export class DummyComponent implements OnInit {
dummyText = "";
ngOnInit(): void {
this.dummyText = generateParagraphs(2);
}
}Auto Inject
import { Component, AfterViewInit } from "@angular/core";
import { autoInjectDummyContent } from "dummytextjs";
@Component({
selector: "app-auto-dummy",
template: `<div data-dummy="5p"></div>`
})
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)
<body>
<h1 data-dummy="2s"></h1>
<p data-dummy="1p"></p>
<script type="module">
import { autoInjectDummyContent } from "dummytextjs";
autoInjectDummyContent();
</script>
</body>📄 License
MIT
✨ Author
Created with 💻 by @spyshiv