https://github.com/tricinel/svelte-chroma-picker

A color picker written in Svelte
https://github.com/tricinel/svelte-chroma-picker

color color-picker javascript svelte svelte-v3

Last synced: about 19 hours ago
JSON representation

A color picker written in Svelte

• Host: GitHub
• URL: https://github.com/tricinel/svelte-chroma-picker
• Owner: tricinel
• License: mit
• Created: 2020-03-09T11:02:30.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-07-20T22:29:09.000Z (over 2 years ago)
• Last Synced: 2024-10-28T04:24:09.823Z (10 days ago)
• Topics: color, color-picker, javascript, svelte, svelte-v3
• Language: JavaScript
• Size: 694 KB
• Stars: 5
• Watchers: 3
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: Readme.md
  • Changelog: Changelog.md
  • Contributing: Contributing.md
  • License: License.md

Awesome Lists containing this project

README

        
# svelte-chroma-picker

What?! Yet another color picker? Yep, I wanted to learn [svelte][svelte].

![Npm version][npm-version-badge]

[![Npm downloads][npm-downloads-badge]][svelte-chroma-picker-npm] ![License][license-badge]

## Installation

```

yarn add svelte-chroma-picker

```

```

npm i --save svelte-chroma-picker

```

## Usage

To use it, simply import it as a svelte component.

```html

  import ChromaPicker from 'svelte-chroma-picker';

  let color = '#fff';

```

[Play with this example on Code Sandbox.][sandbox-svelte]

### Options

You have a few options at your disposal.

- _color_. Obviously, the color you want to bind to.

- _width_ and _height_. You can control the size of the color box for the picker.

### Events

- _update_. Dispatched every time you change the color. It returns an object with the rgb and hsv values for the current color, should you need them.

Check out the [Demo](./demo).

## A note on accessibility

I'm still working on making this 100% keyboard and screen reader accessible. Pull requests welcome!

## License

MIT License - fork, modify and use however you want.

[svelte]: https://svelte.dev/

[license-badge]: https://img.shields.io/npm/l/svelte-chroma-picker.svg?style=flat-square

[npm-version-badge]: https://img.shields.io/npm/v/svelte-chroma-picker.svg?style=flat-square

[npm-downloads-badge]: https://img.shields.io/npm/dt/svelte-chroma-picker.svg?style=flat-square

[svelte-chroma-picker-npm]: https://www.npmjs.com/package/svelte-chroma-picker

[sandbox-svelte]: https://codesandbox.io/s/svelte-chroma-picker