# v-iro.js

> This wraps the iro.js Color Picker into a vue composable and adds a disable property.

Latest version **1.0.2** (published 2022-09-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install v-iro.js
pnpm add v-iro.js
yarn add v-iro.js
bun add v-iro.js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-09-27 |
| First published | 2022-09-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 3.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mail@kevinko.ch |
| Maintainers | rndusername |
| Keywords | vue, iro, iro.js, colorpicker |

## Links

- npm: https://www.npmjs.com/package/v-iro.js
- npm.io page: https://npm.io/package/v-iro.js

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.39
- [@jaames/iro](https://npm.io/package/@jaames/iro.md) ^5.5.2

## Alternatives

- [replicas-cli](https://npm.io/package/replicas-cli.md) — 3.0K weekly downloads
- [env-contract](https://npm.io/package/env-contract.md) — 133 weekly downloads
- [@openveo/api](https://npm.io/package/@openveo/api.md) — 61 weekly downloads
- [@ryniaubenpm2/cumque-error-reiciendis](https://npm.io/package/@ryniaubenpm2/cumque-error-reiciendis.md) — 54 weekly downloads
- [ts-global-type-extra](https://npm.io/package/ts-global-type-extra.md) — 11 weekly downloads

## Recent versions

- 1.0.2 (latest) — 2022-09-27
- 1.0.1 — 2022-09-27
- 1.0.0 — 2022-09-27

## README

# Iro.js for Vue

This package is a wrapper of the [iro.js](https://iro.js.org/) library for vue.
Additionally it adds a disable property.

## Import

`import { useIroColorPicker } from "v-iro.js"`

## How to Use

`useIroColorPicker(wrapper, options, disable).then(callback)`

- `wrapper`: A [template ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) from an container.
- `options`: The [options](https://iro.js.org/colorPicker_api.html#options) for the iro color picker.
- `disable`: A ref of a boolean - if the color picker should be disabled.
- `callback`: The composable gives back a promise which resolves when the component is mounted. The callback gets the color picker instance as a parameter.

## Types
```
useIroColorPicker(containerRef: Ref<HTMLElement>, disableRef: Ref<boolean>, options: Partial<ColorPickerProps>): Promise<IroColorPicker>
```

## Example
```
<template>
  <div ref="wrapper"></div>
  <input type="checkbox" name="disablePicker" v-model="disable">
  <label for="disablePicker">Disable</label> <br>
  Color: {{color}}
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue';
import { useIroColorPicker } from "v-iro.js"
import type { IroColor } from '@irojs/iro-core';

const wrapper = ref()
const color = ref("")
const disable = ref(false)

const options = {
    width: 130
}

useIroColorPicker(wrapper, options, disable).then((colorPicker) => {
  colorPicker.on("color:change", (pickerColor: IroColor) => {
    color.value = pickerColor.hexString
  })
})
</script>
```

The full demo project can be cloned [here](https://github.com/RndUsername/v-iro-demo).

---
_Source: https://npm.io/package/v-iro.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._