npm package: @kizito25/randomly
Description: [![npm version](https://img.shields.io/npm/v/@kizito25/randomly)](https://www.npmjs.com/package/@kizito25/randomly) [![npm downloads](https://img.shields.io/npm/dm/@kizito25/randomly)](https://www.npmjs.com/package/@kizito25/randomly) [![license](https://
Latest version: 1.15.0

# 🖼️ randomly

[![npm version](https://img.shields.io/npm/v/@kizito25/randomly)](https://www.npmjs.com/package/@kizito25/randomly)
[![npm downloads](https://img.shields.io/npm/dm/@kizito25/randomly)](https://www.npmjs.com/package/@kizito25/randomly)
[![license](https://img.shields.io/npm/l/@kizito25/randomly)](LICENSE)

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

```bash
npm install @kizito25/randomly
```

or

```bash
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()


```js
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

```jsx
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](https://github.com/kizito25)

---

## 💡 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.