# gpickr

> > THIS IS A FORKED PACKAGE FROM simonwep THANKS TO HIM.

Latest version **1.0.0** (published 2021-01-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install gpickr
pnpm add gpickr
yarn add gpickr
bun add gpickr
```

## 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.0 |
| Published | 2021-01-24 |
| First published | 2021-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 79.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ilyas Ghomrani |
| Maintainers | ilyes24 |

## Links

- npm: https://www.npmjs.com/package/gpickr
- npm.io page: https://npm.io/package/gpickr

## Dependencies (1)

- [@simonwep/pickr](https://npm.io/package/@simonwep/pickr.md) ^1.4.5

## Recent versions

- 1.0.0 (latest) — 2021-01-24

## README

> THIS IS A FORKED PACKAGE FROM simonwep THANKS TO HIM.

#### Demo: https://simonwep.github.io/gpickr

> This is a demo of how [pickr](https://github.com/Simonwep/pickr) could be implemented / integrated in other scenarios.

#### Usage
```js
const gpickr = new GPickr({
    el: '.gradient-pickr',

    // Pre-defined stops. These are the default since at least two should be defined
    stops: [
        ['rgb(255,132,109)', 0],
        ['rgb(255,136,230)', 1]
    ]
})
```

### GPickr Instance / static props
* gpickr.Pickr _- [Pickr](https://github.com/Simonwep/pickr)._
* gpickr.addStop(color`:String`, loc`:Number`) _- Add a color-stop._
* gpickr.removeStop(v`:String|Number|Stop`) _- Remove a color stop by color, location or stop-instance._
* gpickr.getGradient() _- Returns the current gradient as css string._
* gpickr.getStops() _- Array of stop objects with each a `location` between `0` and `1` as well as an `rgba` color value. The `toString` function is overridden and
returns the array ready-to-use as comma seperated list, useful if a custom direcation / angle want to be used._
* gpickr.getLinearAngle() _- Returns the current selected angle. `-1` if currently in radial-mode_
* gpickr.setLinearAngle(angle`:Number`) _- Applies a new angle to the current linear gradient._
* gpickr.getRadialPosition() _- Returns the current chosen direction. `null` if currently in linear-mode_
* gpickr.setRadialPosition(position`:String`) _- Sets a new position for the current radial-gradient._
* gpickr.on(event`:String`, cb`:Function`) _- Appends an event listener to the given corresponding event-name (see section Events), returns the gpickr instance so it can be chained._
* gpickr.off(event`:String`, cb`:Function`) _- Removes an event listener from the given corresponding event-name (see section Events), returns the gpickr instance so it can be chained._

### Events

| Event          | Description |
| -------------- | ----------- |
| `init`         | Initialization done - gpickr can be used |
| `change`       | User changed the gradient |

> Example:
```js
gpickr.on('init', instance => {
    console.log('init', instance);
}).on('change', instance => {
    console.log('change', instance.getGradient());
});
```

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