@tiny-placeholder/core NPM

@tiny-placeholder/core

Project Overview

This is a tiny library for use when you need simple placeholder images.

Features

Both components offer the following features:

Set desired width and height.
Choose desired shape (rectangle, triangle, circle).
Set desired background color.
Insert text in the center of the image with desired color and size.

Installation / Usage

npm:

$ npm install @tiny-placeholder/core

yarn:

$ yarn add @tiny-placeholder/core

pnpm:

$ pnpm add @tiny-placeholder/core

You can install @tiny-placeholder/core in your project using a package manager.

Example code:

const options = createPlaceholderOptions({
  width: 200,
  height: 200,
  backgroundColor: '#cccccc',
  textColor: '#333333',
  text: 'Placeholder',
  fontSize: 20,
  fontFamily: 'Arial, sans-serif',
  borderWidth: 0,
  borderColor: '#000000',
  borderStyle: 'solid',
  borderRadius: 0,
  shape: 'rectangle',
})

const placeholder = new PlaceholderFactory(options)

const imageSrc = placeholder.getDataURL()

const imgElement = document.createElement('img')

img.src = imageSrc

1. createPlaceholderOptions

Use the createPlaceholderOptions function to generate options with type support.

2. PlaceholderFactory

This class generates images based on provided options. The getDataURL method can return the image data. This can be used in various ways where image data is needed, such as displaying the generated image using an img tag or downloading the image using an a tag.