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.
Angular
Install package via NPM.
npm i dummy-text
Add CUSTOM_ELEMENTS_SCHEMA into the AppModule schemas.
;; ; @ {}
Call defineCustomElements()
function in main.ts
.
;; ;; ; if environmentproduction ; ;;
Usage examples - Dummy text
Default dummy text (Lorem ipsum) Test on CodePen
5 sentences 20 words 150 characters
Specific dummy text Test on CodePen
Far far away Pangram Werther Kafka Cicero Cicero (en) Li Europan lingues Li Europan lingues (en) Lorem Ipsum
Usage examples - Dummy names
Random male/female name Random female name Random male name Fixed female names Fixed male names
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