dummy-text
Web component library to easily add dummy texts to your web.
DUMMY TEXT
Simple and tiny web components library to easily add dummy texts & dummy names to your web.
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
<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
Links
Compatibility
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