🖼️ randomly

A lightweight utility to generate random gradient images and gradient backgrounds; great for placeholders, skeletons, or design prototyping.

Works in React via a ready-to-use <RandomImage /> component.

✨ Features

• 🔀 Generate random CSS gradients (linear-gradient(...))
• ⚛️ Drop-in <RandomImage /> React component
• 🌈 Stylish placeholders while building your UI
• 🪶 Zero dependencies for browser use

📦 Installation

npm install @kizito25/randomly

or

yarn add @kizito25/randomly

📚 Usage

🔵 1. Generate a Random CSS Gradient for the Browser

• I have recentely added two new APIs, randomLightGradient() and randomSolidColors(). The are used exactly the same way as randomGradient()

import { randomGradient, randomLightGradient, randomSolidColors  } from '@kizito25/randomly';

 <div
    key={index}
    className="gradient"
    style={{ background: randomGradient() || randomLightGradient() || randomSolidColors()}}
    >
        <p>Div with a Gradient background</p>
    </div>

⚛️ 2. Use <RandomImage /> in React

import { RandomImage } from '@kizito25/randomly';

function App() {
  return (
    <div>
      <h2>Randomly:</h2>
       {new Array(10).fill(9).map((gradient, index) => (
          <div
            key={index}
            className=""
          >
            <RandomImage
              width={100}
              height={100}
              className=""
              alt="Random SVG Img"
              style={{
                borderRadius: "10px",
                boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
                margin: "10px",
              }}
            />
          </div>
        ))}
    </div>
  );
}

🔧 Props

| Prop | Type | Default | Description | |-------------|----------|---------|--------------------------------------| | width | number | 300 | Width of the image | | height | number | 200 | Height of the image | | className | string | - | Optional CSS class for the <img /> element | | style | object | — | Optional Inline styles for the image | | ...rest | any | — | Optional Other standard <img> props |

📄 License

MIT © Kizito Ihugba

💡 Why Use randomly?

• You're designing an app but don’t have images yet
• You need elegant placeholders
• You want some colour ✨ in your prototypes

randomly does all these for you.