gradient-placeholder
v1.0.2
Published
Only 2KB utility for generating customizable SVG placeholders for any dimension image with gradient backgrounds and text.
Downloads
46
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.