Reset swatches array with a pre-existing array
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 4.5k
- Forks
- 292
- PR merge metrics
- No merged PRs in 30d
Description
I have my swatches contained in a variable array.
Typically I would add a swatch to the array like so and re-apply the variable to be used again at a later time.
swatches.push(pickr.getColor().toRGBA().toString());
swatches = swatches;
I would delete a swatch from the array like so and again re-apply the variable to be used again at a later time.
swatches.filter(e => e !== fillPickr.getColor().toRGBA().toString());
swatches = swatches;
However all the documentation says is....
pickr.removeSwatch(index:Number):Boolean- Removes a color from the swatch palette by its index, returns true if successful.
So I tried removing the swatch by finding the string and removing it that way.
pickr.removeSwatch(swatches.indexOf(pickr.getColor().toRGBA().toString()));
It all works fine up until I allow the user to load in a project file to reset all the swatches to a new array.
When I run this code in console it runs perfectly fine but doesn't if I use the fileReader API.
Here's the code....
pickr.destroyAndRemove();
$('[data-dialog=colorpicker]').empty().append('<div class="pickr"></div>');
pickr= Pickr.create({
// Which theme you want to use. Can be 'classic', 'monolith' or 'nano'
theme: 'classic',
el: '.pickr',
inline: 'true',
default: 'hsl(0, 0%, 100%)',
comparison: true,
swatches,
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: true,
rgba: true,
hsla: true,
hsva: true,
cmyk: true,
input: true,
clear: false,
cancel: true,
save: true
}
}
});
pickr.on('init', () => {
pickr.show();
});
pickr.show();
pickr.on('save', () => {
swatches.push(pickr.getColor().toRGBA().toString());
swatches = swatches;
pickr.addSwatch(pickr.getColor().toRGBA().toString());
});
Here's the alert I got with the fileReader API via console.

It would be nice if there was a way built in to reset the array with a pre-existing one.
Version: v1.8.2
Used bundle (es5 or normal one): normal
Used theme (default is classic): classic
Browser-version: Version 96.0.4664.45 Chrome
Operating-system: Windows 10
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by tracing Pickr.create's swatches option and the lifecycle around destroyAndRemove, then compare it with removeSwatch and addSwatch. Confirm how a fileReader-loaded array should replace the existing palette, document the supported behavior, and add coverage for recreating the picker with pre-existing swatches.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100