Contact us Create app

Directory

← Back

dummy-text

Web component library to easily add dummy texts to your web.

Author

Rating

Links

Popularity

<100

DUMMY TEXT

Simple and tiny web components library to easily add dummy texts & dummy names to your web.
NPM Version Package License NPM Downloads Minified size Minzipped size

Description

Add dummy texts and dummy names to your web just by using <dummy-text> & <dummy-name> vanilla web components (no frontend framework is required).

You can choose between 9 diffrent dummy texts. Length of dummy text is defined by a number of sentences/words/characters.

Available dummy texts:

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

You can also use random male/female names, random female names, random male names and fixed male/female names (same name every time).

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

Dummy text identifiers:

  • lorem-ipsum
  • far-far-away
  • pangram
  • werther
  • kafka
  • cicero
  • cicero-en
  • li-europan-lingues
  • li-europan-lingues-en

Dummy name web component

description: display random/fixed female/male name
component tag: dummy-name
properties:

property type default value description
type (optional) 'male' / 'female' / number undefined The gender of random name or number for fixed name

Fixed name numbers:

  • 1 .. 10000 Female names
  • 10001 .. 20000 Male names

License

MIT

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Released
2018-07-23
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

dummy-text - Vaadin Add-on Directory

Web component library to easily add dummy texts to your web. dummy-text - Vaadin Add-on Directory

DUMMY TEXT

Simple and tiny web components library to easily add dummy texts & dummy names to your web.
NPM Version Package License NPM Downloads Minified size Minzipped size

# Description

Add dummy texts and dummy names to your web just by using <dummy-text> & <dummy-name> vanilla web components (no frontend framework is required).

You can choose between 9 diffrent dummy texts. Length of dummy text is defined by a number of sentences/words/characters.

#### Available dummy texts: * Lorem Ipsum * Far far away * Pangram * Werther * Kafka * Cicero * Cicero (en) * Li Europan lingues * Li Europan lingues (en)

You can also use random male/female names, random female names, random male names and fixed male/female names (same name every time).

#### 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. ```html ``` #### Angular Install package via NPM. ```bash npm i dummy-text ``` Add CUSTOM_ELEMENTS_SCHEMA into the AppModule schemas. ```js 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`. ```js 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](https://codepen.io/michallubos/pen/qyRJWa) ````html

5 sentences

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

20 words

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et

150 characters

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis p

```` Specific dummy text [Test on CodePen](https://codepen.io/michallubos/pen/BPpqoO) ````html

Far far away

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.

Pangram

The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymph

Werther

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with

Kafka

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.

Cicero

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem

Cicero (en)

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was bo

Li Europan lingues

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.

Li Europan lingues (en)

The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

```` ## Usage examples - Dummy names [Test on CodePen](https://codepen.io/michallubos/full/ejgPGJ) ````html

Random male/female name

Nicola Johnston

Random female name

Anne Gill

Random male name

Alan Murray

Fixed female names

Alexandra Abraham Diana Paige Abigail Young

Fixed male names

Adrian Abraham Benjamin Lee Adam Young ```` # 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 | Dummy text identifiers: * lorem-ipsum * far-far-away * pangram * werther * kafka * cicero * cicero-en * li-europan-lingues * li-europan-lingues-en ## Dummy name web component **description**: display random/fixed female/male name
**component tag**: `dummy-name`
**properties**: | property | type | default value | description | | ------------ | ------------ | ------------ | ------------ | | type (optional) | `'male'` / `'female'` / number | `undefined` | The gender of random name or number for fixed name | Fixed name numbers: * 1 .. 10000 Female names * 10001 .. 20000 Male names # License [MIT](LICENSE)
View on GitHub
View on NPM

dummy-text version 1.0.0
### Dependencies

dummy-text version 1.0.1
### Dependencies

dummy-text version 1.0.2
### Dependencies

dummy-text version 1.0.3
### Dependencies

Online