Nefariously Programmed Mecha

    dummy-text
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    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

    Install

    npm i dummy-text

    DownloadsWeekly Downloads

    102

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    239 kB

    Total Files

    38

    Last publish

    Collaborators

    • michallubos