uiwjs / react-color Goto Github PK

In the GithubPlacement enum there is a typo the word "Bottom" in several combinations.

export enum GithubPlacement {
  Left = 'L',
  LeftTop = 'LT',
  LeftBotton = 'LB',
  Right = 'R',
  RightTop = 'RT',
  RightBotton = 'RB',
  Top = 'T',
  TopRight = 'TR',
  TopLeft = 'TL',
  Botton = 'B',
  BottonLeft = 'BL',
  BottonRight = 'BR',
}

Not sure if you want to change this as it would mean a API breaking change. You could add the correctly spelled keys mapping to the same string values though.

Hey everyone!

First of all, I love the library. Is there a way to change the width/height of the Wheel variant but not use a square?
I am able to change it with the props but the draggable picker still always seems to rotate in a circle?

I'd appreciate any help here!

Could you please add an option to disable alpha for Sketch picker? Alpha doesn't make sense if you work with hex codes because it requires an 8 character hex code format instead of 6 character format which is used by default

When you pass HSVA into the color wheel if you set the V to 0, the dragging of the color wheel cursor becomes stuck and brings S to 0 as well. The H value will change while dragging the cursor, but the cursor never moves from the center of the color wheel.

Hi,

I'm trying to bundle a project using @uiw/color-convert package, but I get the Circular dependencies error.

(!) Circular dependencies
node_modules/@uiw/color-convert/esm/index.js -> node_modules/@uiw/color-convert/esm/utils.js -> node_modules/@uiw/color-convert/esm/index.js
node_modules/@uiw/color-convert/esm/index.js -> node_modules/@uiw/color-convert/esm/getContrastingColor.js -> node_modules/@uiw/color-convert/esm/index.js

Anyone had any issue like that? Trying to find out if it's a bug or am I doing something wrong.
Thanks

错误描述

Block组件输入颜色数据，不起作用

截图

Issue is reproducible both in code and on the live demo site: https://uiwjs.github.io/react-color/#/colorful

• use the second picker on the page, under Usage section
• Drag the color picker to the lower dark range - it jumps around and is unusable
• For some reason, this does not occur in the "example" pickers that are not accompanied by a code snippet

This occurs for several other demo pickers on the site, making this unusable in my projects. This is occurring in Chrome.

Is it possible to implement direction="vertical"?

I see Colorful can use hex; is there a way we can implement hex with the Wheel component instead of hsva? Really great tools! Thanks.

Uncaught TypeError: Cannot redefine property: render
    at Function.defineProperty (<anonymous>)
    at <unknown> (file:///..../app/node_modules/@uiw/react-color/cjs/index.js:188:10)

NextJS (tried to turn off SSR, checked for window variable etc) - no difference. Do you have any advises here? Thank you in advance

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @types/react-test-renderer to ~18.3.0
• chore(deps): update dependency husky to ~9.1.0
• chore(deps): update react monorepo to ~18.3.0 (@types/react, @types/react-dom, react, react-dom, react-test-renderer)
• chore(deps): update dependency @testing-library/react to v16
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

I try to drag pointer of on Colorful component on mobile device, but nothing happens. You may try it on your live-demo site from your phone https://uiwjs.github.io/react-color/#/colorful

It would be very nice to be able to pass a prop to the color picker to remove the alpha slider when I want to restrict the possible value selected to RGB, not RGBA. If the ability already exists, I have not managed to find it in the documentation.

I'm thinking it would work something like:

<Colorful disableAlpha='true' />

Hello. I tried to customize the wheel by setting direction and angle but they just change the visualization of the background, both the Pointer color and onChange ColorResult still use the "original" color (with default direction="anticlockwise" and angle=180).

Am I missing something?

How can I use saturation like hue and alpha in range mode?
I need this one
Hue
Saturation
Shade
Alpha

In my opinion the shade slider is not working properly. For the color #ffffff, the range is always from red to black. It seems to me that the saturation should not be permanently 100. Correction suggestion:

import { hsvaToHslaString } from '@uiw/color-convert'
import Alpha, { AlphaProps } from '@uiw/react-color-alpha'
import React from 'react'

export interface ShadeSliderProps extends Omit<AlphaProps, 'onChange'> {
  onChange?: (newShade: { v: number }) => void
}

export const ShadeSlider = React.forwardRef<HTMLDivElement, ShadeSliderProps>(
  (props, ref) => {
    const {
      prefixCls = 'w-color-saturation',
      className,
      onChange,
      direction = 'horizontal',
      hsva,
      ...other
    } = props
    const colorFrom = hsvaToHslaString({ ...hsva, a: 1, v: 100 })
    return (
      <Alpha
        ref={ref}
        {...other}
        className={`${prefixCls} ${className || ''}`}
        hsva={{ h: hsva.h, s: hsva.s, v: hsva.v, a: 1 - hsva.v / 100 }}
        direction={direction}
        background={`linear-gradient(to ${
          direction === 'horizontal' ? 'right' : 'bottom'
        }, ${colorFrom}, rgb(0, 0, 0))`}
        onChange={(_, interaction) => {
          onChange &&
            onChange({
              v:
                direction === 'horizontal'
                  ? 100 - interaction.left * 100
                  : 100 - interaction.top * 100,
            })
        }}
      />
    )
  },
)

add a type for hex-color strings that is a bit stricter than only string.
type HexColor = `#${string}`;

Currently, there are parameters to pass the color value, every time that value is changed the color will reset itself to that value.

Can we also have the option to have a default color value? A value that is only present until the user changes the color.

I would appreciate this feature. Thanks!

Could Swatches support a null color swatch to unset the color?

I've used code like this:

const [hsva, setHsva] = useState({ h: 214, s: 43, v: 90, a: 1 })

const onChangeColorPicker = (event: any) => {
    setHsva({ ...hsva, ...event.hsva })
  }
  
return (
 <Wheel className={"wheel"} color={hsva} onChange={(event) => onChangeColorPicker(event)} />
)

At times, when I simply click (not click, hold, and move) on the wheel, the color doesn't update immediately. I find that I have to click on the same spot again to trigger the onChange event.
Do I need to use another approach?

Using the color picker inside salesforce (that creates an iframe to load my webapp), there's an DOMException inside Saturation.js when selecting a color

https://github.com/uiwjs/react-color/blob/main/packages/color-convert/src/index.ts#L208C28-L208C28

hexToRgab('#00000000') ===> { r:0, g: 0, b: 0, a: 1 }

fix: =>>>>.  (a ?? 255) / RGB_MAX

What happens:
For the wheel component, if the color is set to '#000000', then the cursor is immovable

What should happen:
The cursor should be able to move round the wheel and maybe capture all essence of black

Hello there,

Using your library, I see that a margin has slipped around the circles. Is this a normal behavior? Do you know how I can center them? Is there a prop to add CSS classes (or styles) to override the style of the colored circles?

Thank you in advance and have a great day =D

Chrome's actual color picker widget has an eye dropper to let you pick any color. Chrome actually has an API to let you easily add that functionality https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper - although it won't work in any other browsers, unfortunately. Might still be worth adding, you can do feature detection to decide whether to show it or not.

I'm using @uiw/react-color-wheel latest version (1.0.2) on one of my React JS projects. I need to customize the pointer element. So basically pointer props (color, left, right) will be enough for my implementation. But the problem is the pointer doesn't fit within the wheel element and pointer props are always the same when changing.
Tried with the default Pointer as well. But the result remains the same.

Pointer preview

Pointer props

color: ""
left: "0"
prefixCls: "w-color-wheel"
top: "0"

Source code

Is there any slider I can use to change v for hsva wheel?

It would be great, if values like #121212 could also be pasted into the hex input fields.
When copying a hex value from an arbitrary source it might contain a leading #.
When pasting it into the input field it unfortunately resets to the previous value.