# @ray-js/lamp-color-collection

> 照明色彩收藏组件

Latest version **1.2.4** (published 2025-11-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ray-js/lamp-color-collection
pnpm add @ray-js/lamp-color-collection
yarn add @ray-js/lamp-color-collection
bun add @ray-js/lamp-color-collection
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.2.4 |
| Published | 2025-11-10 |
| First published | 2022-11-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 30.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tuyafe |

## Links

- npm: https://www.npmjs.com/package/@ray-js/lamp-color-collection
- npm.io page: https://npm.io/package/@ray-js/lamp-color-collection

## Dependencies (1)

- [color](https://npm.io/package/color.md) ^3.2.1

## Recent versions

- 1.2.4 (latest) — 2025-11-10
- 1.2.5-beta.2 (beta) — 2026-01-30
- 1.2.5-beta.1 — 2026-01-29
- 1.2.4-beta-2 — 2025-09-19
- 1.2.4-beta-1 — 2025-08-26
- 1.2.3 — 2025-08-13
- 1.2.3-beta-6 — 2025-05-27
- 1.2.3-beta-5 — 2025-05-27
- 1.2.3-beta-4 — 2025-05-14
- 1.2.3-beta-3 — 2025-04-15
- 1.2.3-beta-2 — 2025-04-15
- 1.2.3-beta-1 — 2025-04-15
- 1.2.2 — 2025-01-22
- 1.2.2-beta-1 — 2025-01-20
- 1.2.1 — 2024-12-25
- … 13 more at https://npm.io/package/@ray-js/lamp-color-collection/versions

## README

# @ray-js/lamp-color-collection

[![latest](https://img.shields.io/npm/v/@ray-js/lamp-color-collection/latest.svg)](https://www.npmjs.com/package/@ray-js/lamp-color-collection) [![download](https://img.shields.io/npm/dt/@ray-js/lamp-color-collection.svg)](https://www.npmjs.com/package/@ray-js/lamp-color-collection)

> Lighting color collection

## Installation

```sh
$ npm install @ray-js/components-ty-lamp
// or
$ yarn add @ray-js/components-ty-lamp
```

## Usage

### Basic Usage

```tsx
import { LampColorCollection } from '@ray-js/components-ty-lamp';

const defaultColorList = [
  { h: 200, s: 1000, v: 1000 },
  { b: 1000, t: 670 },
];

const [colorList, setColorList] = useState(defaultColorList);
const [activeIndex, setActiveIndex] = useState(0);
const handleAdd = () => {
  setColorList([
    ...colorList,
    {
      b: Math.round(Math.random() * 1000),
      t: Math.round(Math.random() * 1000),
    },
  ]);
};

const handleDelete = (_colorList, _activeIndex) => {
  setColorList([..._colorList]);
  setActiveIndex(_activeIndex);
};

const handleChecked = (colorItem, _activeIndex: number) => {
  setActiveIndex(_activeIndex);
};

<LampColorCollection
  disableDelete={colorList.length > 2}
  theme="dark"
  activeIndex={activeIndex}
  colorList={colorList}
  onAdd={handleAdd}
  onDelete={handleDelete}
  onChecked={handleChecked}
/>;
```

### Advanced Usage：click to delete is supported，Note⚠️: Newly added in V1.2.0 version

```tsx
import { LampColorCollection } from '@ray-js/components-ty-lamp';

const { ColorCollectInnerDelete } = LampColorCollection;
const defaultColorList = [
  { h: 200, s: 1000, v: 1000 },
  { b: 1000, t: 670 },
];

const [colorList, setColorList] = useState(defaultColorList);
const [activeIndex, setActiveIndex] = useState(0);
const handleAdd = () => {
  setColorList([
    ...colorList,
    {
      b: Math.round(Math.random() * 1000),
      t: Math.round(Math.random() * 1000),
    },
  ]);
};

const handleDelete = (_colorList, _activeIndex) => {
  setColorList([..._colorList]);
  setActiveIndex(_activeIndex);
};

const handleChecked = (colorItem, _activeIndex: number) => {
  setActiveIndex(_activeIndex);
};

<ColorCollectInnerDelete
  disableDelete={colorList.length > 2}
  theme="light"
  activeIndex={activeIndex}
  colorList={colorList}
  onAdd={handleAdd}
  onDelete={handleDelete}
  onChecked={handleChecked}
/>;
```

### Advanced Usage：Custom delete button style，Note⚠️: Newly added in V1.2.0 version

```tsx
import { LampColorCollection } from '@ray-js/components-ty-lamp';
const { ColorCollectInnerDelete } = LampColorCollection;

const defaultColorList = [
  { h: 200, s: 1000, v: 1000 },
  { b: 1000, t: 670 },
];

const [colorList, setColorList] = useState(defaultColorList);
const [activeIndex, setActiveIndex] = useState(0);
const handleAdd = () => {
  setColorList([
    ...colorList,
    {
      b: Math.round(Math.random() * 1000),
      t: Math.round(Math.random() * 1000),
    },
  ]);
};

const handleDelete = (_colorList, _activeIndex) => {
  setColorList([..._colorList]);
  setActiveIndex(_activeIndex);
};

const handleChecked = (colorItem, _activeIndex: number) => {
  setActiveIndex(_activeIndex);
};
<ColorCollectInnerDelete
  disableDelete={colorList.length > 2}
  theme="dark"
  addButtonPos="tail"
  activeIndex={activeIndex}
  colorList={colorList}
  onAdd={handleAdd}
  onDelete={handleDelete}
  onChecked={handleChecked}
  renderDeleteElement={() => (
    <View
      style={{
        position: 'absolute',
        top: '50%',
        right: '50%',
        transform: 'translateY(-50%) translateX(50%)',
        width: 40,
        height: 4,
        borderRadius: 10,
        backgroundColor: 'red',
        zIndex: 10,
      }}
    />
  )}
/>;
```

---
_Source: https://npm.io/package/@ray-js/lamp-color-collection · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._