gradient-placeholder
v1.0.2
Published
Only 2KB utility for generating customizable SVG placeholders for any dimension image with gradient backgrounds and text.
Downloads
7
Maintainers
Readme
GradientPlaceholderJS Fill Empty images of any size with beautiful Gradient.🌈
Very light 🪶 and simple and gradient background placeholder 🖼️.
NPM
To use GradientPlaceholderJS React framework, simply install via NPM or your preferred package manager:
npm i gradient-placeholder
yarn add gradient-placeholder
pnpm add gradient-placeholder
Next, import the package:
import {GradientPlaceholder} from 'gradient-placeholder';
ReactJS / Vite Example
import { GradientPlaceholder } from "gradient-placeholder";
<GradientPlaceholder width="500" height="500" gradient={['#078efb', '#f9035e']} />
Size
Required
Specify the size of the placeholder image by adding the width and height to the component. Example:
<GradientPlaceholder width="500" height="500"/>
Gradient
Optional
Specify custom gradient in hex formant in the placeholder image by adding your Hex code list upto 4 best option pass only 2 Hex code. Example:
<GradientPlaceholder width="500" height="500" gradient={['#078efb', '#f9035e']}/>
Text
Optional
Specify custom text in the placeholder image by adding your text. Example:
<GradientPlaceholder width="500" height="500" text="Hello World!"/>
Text Color
Optional
Specify the text color by adding color=
to the component. We support HEX values or named values (e.g., white).
Example:
<GradientPlaceholder width="500" height="500" text="Hello World!" color="#fff"/>
Background Color
Optional
Specify the background color by adding background=
to the component. We support HEX values or named values (e.g.,
white). Example:
<GradientPlaceholder width="500" height="500" background="#000"/>
Authors
Support
For support, use github issue .
Acknowledgements
- Inspired by bick's placeholder work. Do visit that site.