gradient-placeholder v1.0.2
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.