dummy-text

v1.0.3

Published

2 years ago

Web components library to easily add dummy texts & dummy names to your web

Downloads

162

0High
0Medium
0Low

michallubos

dummy-text dummy text dummy text generator filler text generator lorem ipsum generator far far away generator pangram generator werther generator dummy names fake names dummy names generator fake names generator

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 |

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