How to use @simonwep/pickr - 10 common examples

// Build dom
        this._root = buildGPickr(opt);

        // Check if conic-gradient is supported
        if (CSS.supports('background-image', 'conic-gradient(#fff, #fff)')) {
            this._modes.push('conic');
        }

        opt.el = opt.el.split(/>>/g).reduce((pv, cv, ci, a) => {
            pv = pv.querySelector(cv);
            return ci < a.length - 1 ? pv.shadowRoot : pv;
        }, document);

        opt.el.parentElement.replaceChild(this._root.root, opt.el);

        this._pickr = Pickr.create({
            el: this._root.pickr,
            theme: 'nano',
            inline: true,
            useAsButton: true,
            showAlways: true,
            defaultRepresentation: 'HEXA',

            components: {
                palette: true,
                preview: true,
                opacity: true,
                hue: true,

                interaction: {
                    input: true
                }

mounted() {
            this.pickr = new Pickr({
                el: this.$refs.pickr,
                lockOpacity: true,
                default: this.color,
                theme: 'nano',

                swatches: this.$config.predefinedColors,
                defaultRepresentation: 'HEXA',
                components: {

                    // Main components
                    preview: true,
                    hue: true,

                    // Input / output Options
                    interaction: {
                        input: true,

useLayoutEffect(() => {
    if (!container.current) {
      throw new Error("missing container element");
    }
    pickr.current = new Pickr({
      el: container.current,

      // Pickr internally calls setColor() after initialization, so if our setColor
      // happens too early it will be overridden by the default color
      default: colorRef.current,

      theme: "monolith",
      useAsButton: true,
      comparison: false,
      lockOpacity: true,
      components: {
        preview: false,
        hue: true,
        interaction: {
          input: true,
        },

const createAndOpen = useCallback(() => {
        if (!ref.current) {
            return;
        }

        if (pickrRef.current) {
            return;
        }

        const pickr = Pickr.create({
            el: ref.current,
            theme: "nano",
            outputPrecision: 0,
            useAsButton: true,
            default: currentColorRef.current,
            components: {
                // Main components
                preview: true,
                hue: true,

                // Input / output Options
                interaction: {
                    input: true,
                },
            },
        });

OpenColorPicker() {
        const theActiveMathField = this.props.theActiveMathField;

        if (!this.pickr) {
            this.pickr = Pickr.create({
                el: '#colorBtn',
                useAsButton: true,

                components: {

                    // Main components
                    preview: true,
                    opacity: false,
                    hue: true,

                    // Input / output Options
                    interaction: {
                        hex: true,
                        rgba: true,
                        hsla: true,
                        hsva: true,

private initPickr = () => {
		this.pickr = new Pickr({
			el: '.clr-pickr',
			default: '#00FFAA',
			theme: 'classic',
			lockOpacity: true,
			components: {
				preview: true,
				opacity: true,
				hue: true,
				interaction: {
					input: true,
					save: true
				}
			}
		});
		this.pickr.on('init', instance => {
			this.pickr.setColor(this.store.get("color", "#FF9900"));

setTimeout(() => {
    const pickr = new Pickr({
      el: picker,
      theme: "nano",
      default: old,
      autoReposition: false,
      components: {
        preview: true,
        opacity: true,
        hue: true,
        interaction: {
          cancel: true,
          save: true
        }
      },
      strings: {
        save: TEXT.OK,
        cancel: TEXT.CANCEL

mounted() {
			this.pickr = Pickr.create({
				el: '.' + this.mapping.handle + '-pickr',
				theme: 'monolith',
				default: this.mapping.default,
				comparison: true,
				components: {
                    opacity: this.settings.transparency,
                    hue: true,
                }
            }).on('save', (color, instance) => {
                this.pickrChanged(color)
            }).on('change', (color, instance) => {
                this.pickrChanged(color)
            }).on('clear', (instance) => {
                this.pickrChanged(null)
            })

mounted() {
            let defaultColor = this.value === null && this.field.settings.default ? this.field.settings.default : ''

            this.pickr = Pickr.create({
                el: '.' + this.pickrClass,
                theme: 'monolith',
                default: this.value && this.value != '' ? this.value : defaultColor,
                swatches: [
                    '#000000',
                    '#FFFFFF',
                    
                    '#F7FAFC',
                    '#EDF2F7',
                    '#E2E8F0',
                    '#CBD5E0',
                    '#A0AEC0',
                    '#718096',
                    '#4A5568',
                    '#2D3748',

export default () => utils.createFromTemplate(`
<div class="gpickr">

    <div></div>
    <div class="gpcr-interaction">
    <div class="gpcr-result">
        
         <div class="gpcr-mode" data-mode="linear"></div>

            <div class="gpcr-angle">
                <div></div>
            </div>

            <div class="gpcr-pos">
                ${['tl', 'tm', 'tr', 'l', 'm', 'r', 'bl', 'bm', 'br'].map(v =&gt; `<div data-pos="${v}"></div>`).join('')}
            </div>
        </div></div></div>