dummy-placeholder

Dummy image & text placeholders

Usage no npm install needed!

<script type="module">
  import dummyPlaceholder from 'https://cdn.skypack.dev/dummy-placeholder';
</script>

README

dummy-placeholder

Dummy placeholders for images & text.

Quick start

npm i dummy-placeholdeer --save

Usage

import { ImgPlaceholder, TxtPlaceholder } from "dummy-placeholder";

ImgPlaceholder({}); // Will return a placeholder image url of 300x300
TxtPlaceholder({}); // Will return a string of 200 words by default

Configuration

All parameters are optional (Dummy Image)

const configObj = {
    width: 600,
    height: 200,
    bgColor: "ff0000", // Note: Color code without # sign
    txtColor: "ffffff",  // Note: Color code without # sign
    imgText: "My Awesome place holder"
}
ImgPlaceholder(configObj); // Will return a placeholder image url of 600x200 with red background and White text
All parameters are optional (Dummy Text)

If you are using any frontend framework like (React, Vuejs, Angular) you have to render string as HTML if type is 'html'.

React

<div dangerouslySetInnerHTML={{__html: TxtPlaceholder({ paragraphs: 2, paraWords: 250, type: 'html' })}} />
Vuejs

<div v-html="TxtPlaceholder({ paragraphs: 2, paraWords: 250, type: 'html' })"></div>
Angular

<div [innerHTML]="TxtPlaceholder({ paragraphs: 2, paraWords: 250, type: 'html' })"></div>

Configuration (Dummy Text)

const configObj = {
    paragraphs: 3,
    paraWords: 250,
    type: 'html' // html | plain (By default plain text)
}
TxtPlaceholder(configObj); // will return 3 paragraphs enclosed within <p> tag. Each paragraph with 250 words.