Dummy-text NPM

Description

Available dummy texts:

Lorem Ipsum
Far far away
Pangram
Werther
Kafka
Cicero
Cicero (en)
Li Europan lingues
Li Europan lingues (en)

Available dummy names:

10000 unique female names
10000 unique male names

Getting started

Installation

Vanilla web (no frontend framework)

Put the following script tag into the head element of your html file.

<script src='https://unpkg.com/dummy-text@latest/dist/dummy-text.js'></script>

Angular

Install package via NPM.

npm i dummy-text

Add CUSTOM_ELEMENTS_SCHEMA into the AppModule schemas.

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Call defineCustomElements() function in main.ts.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineCustomElements } from 'dummy-text';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
defineCustomElements(window);

Usage examples - Dummy text

Default dummy text (Lorem ipsum) Test on CodePen

<body>
  <h1>5 sentences</h1>
  <p><dummy-text sentences="5"></dummy-text></p>

  <h1>20 words</h1>
  <p><dummy-text words="20"></dummy-text></p>

  <h1>150 characters</h1>
  <p><dummy-text characters="150"></dummy-text></p>
</body>

Specific dummy text Test on CodePen

<body>
  <h1>Far far away</h1>
  <p><dummy-text text="far-far-away" sentences="3"></dummy-text></p>

  <h1>Pangram</h1>
  <p><dummy-text text="pangram" characters="150"></dummy-text></p>

  <h1>Werther</h1>
  <p><dummy-text text="werther" words="20"></dummy-text></p>

  <h1>Kafka</h1>
  <p><dummy-text text="kafka" sentences="3"></dummy-text></p>

  <h1>Cicero</h1>
  <p><dummy-text text="cicero" words="15"></dummy-text></p>

  <h1>Cicero (en)</h1>
  <p><dummy-text text="cicero-en" characters="100"></dummy-text></p>

  <h1>Li Europan lingues</h1>
  <p><dummy-text text="li-europan-lingues" sentences="3"></dummy-text></p>

  <h1>Li Europan lingues (en)</h1>
  <p><dummy-text text="li-europan-lingues-en" words="25"></dummy-text></p>

  <h1>Lorem Ipsum</h1>
  <p><dummy-text text="lorem-ipsum" sentences="3"></dummy-text></p>
</body>

Usage examples - Dummy names

Test on CodePen

<body>
  <h1>Random male/female name</h1>
  <dummy-name></dummy-name>
  
  <h1>Random female name</h1>
  <dummy-name type="female"></dummy-name>

  <h1>Random male name</h1>
  <dummy-name type="male"></dummy-name>

  <h1>Fixed female names</h1>
  <dummy-name type="1"></dummy-name>
  <dummy-name type="6578"></dummy-name>
  <dummy-name type="10000"></dummy-name>

  <h1>Fixed male names</h1>
  <dummy-name type="10001"></dummy-name>
  <dummy-name type="14567"></dummy-name>
  <dummy-name type="20000"></dummy-name>
</body>

API

Dummy text web component

description: display dummy text of defined length component tag: dummy-text properties:

property	type	default value	description
sentences	number	`undefined`	The number of sentences to display
words	number	`undefined`	The number of words to display
characters	number	`undefined`	The number of characters to display
text (optional)	string	`'lorem-ipsum'`	The identifier of dummy text to use