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. ```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

20 words

150 characters

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

Far far away

Pangram

Werther

Kafka

Cicero

Cicero (en)

Li Europan lingues

Li Europan lingues (en)

Lorem Ipsum

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

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 # License [MIT](LICENSE)