2.4.5 • Published 4 months ago

@uiw/react-color-alpha v2.4.5

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

React Color Alpha

Buy me a coffee npm bundle size npm version Open in unpkg

Alpha is a subcomponent of @react-color.

react-color-alpha

Install

npm i @uiw/react-color-alpha

Usage

import React, { useState } from 'react';
import { hsvaToRgbaString } from '@uiw/color-convert';
import Alpha from '@uiw/react-color-alpha';

export default function Demo() {
  const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
  return (
    <>
      <Alpha
        hsva={hsva}
        onChange={(newAlpha) => {
          setHsva({ ...hsva, ...newAlpha });
        }}
      />
      <div style={{ background: hsvaToRgbaString(hsva), marginTop: 30, padding: 10 }}>
        {JSON.stringify(hsva)}
      </div>
    </>
  );
}

Props

import React from 'react';
import { HsvaColor } from '@uiw/color-convert';
import { Interaction } from '@uiw/react-drag-event-interactive';
import { PointerProps } from './Pointer';
export * from './Pointer';
export interface AlphaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
  prefixCls?: string;
  /** String, Pixel value for picker width. Default `316px` */
  width?: React.CSSProperties['width'];
  /** String, Pixel value for picker height. Default `16px` */
  height?: React.CSSProperties['height'];
  /** hsva => `{ h: 0, s: 75, v: 82, a: 1 }` */
  hsva: HsvaColor;
  /** React Component, Custom pointer component */
  pointer?: (props: PointerProps) => JSX.Element;
  /** Set rounded corners. */
  radius?: React.CSSProperties['borderRadius'];
  /** Set the background color. */
  background?: string;
  /** Set the background element props. */
  bgProps?: React.HTMLAttributes<HTMLDivElement>;
  /** Set the interactive element props. */
  innerProps?: React.HTMLAttributes<HTMLDivElement>;
  pointerProps?: PointerProps;
  /** String Enum, horizontal or vertical. Default `horizontal` */
  direction?: 'vertical' | 'horizontal';
  onChange?: (newAlpha: {
      a: number;
  }, offset: Interaction) => void;
}
export declare const BACKGROUND_IMG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==";
declare const Alpha: React.ForwardRefExoticComponent<AlphaProps & React.RefAttributes<HTMLDivElement>>;
export default Alpha;
interface PointerProps extends React.HTMLAttributes<HTMLDivElement> {
  prefixCls?: string;
  left?: string;
  top?: string;
}

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.

2.4.3

4 months ago

2.4.2

4 months ago

2.4.5

4 months ago

2.4.4

4 months ago

2.4.1

4 months ago

2.4.0

5 months ago

2.3.4

7 months ago

2.3.3

7 months ago

2.3.2

9 months ago

2.3.1

9 months ago

2.3.0

1 year ago

2.2.0

1 year ago

2.1.1

1 year ago

2.0.9

1 year ago

2.1.0

1 year ago

2.0.8

1 year ago

2.0.7

1 year ago

2.0.6

1 year ago

2.0.5

2 years ago

2.0.4

2 years ago

1.4.3

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.3.4

2 years ago

1.3.3

2 years ago

1.3.2

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.2.0

2 years ago

1.2.1

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.10

3 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.1.0

4 years ago

0.0.33

4 years ago

0.0.34

4 years ago

0.0.32

4 years ago

0.0.30

4 years ago

0.0.31

4 years ago

0.0.27

4 years ago

0.0.28

4 years ago

0.0.29

4 years ago

0.0.25

4 years ago

0.0.26

4 years ago

0.0.20

4 years ago

0.0.21

4 years ago

0.0.22

4 years ago

0.0.23

4 years ago

0.0.24

4 years ago

0.0.19

4 years ago

0.0.15

4 years ago

0.0.16

4 years ago

0.0.17

4 years ago

0.0.18

4 years ago

0.0.12

4 years ago

0.0.13

4 years ago

0.0.14

4 years ago

0.0.11

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago