@uiw/react-color-alpha
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.12 • Public • Published

    React Color Alpha

    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';
    
    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>
        </>
      );
    }
    
    export default Demo;

    Props

    import { HsvaColor } from '@uiw/color-convert';
    import { Interaction } from '@uiw/react-drag-event-interactive';
    declare const BACKGROUND_IMG = 'data:image/png;base64,....'
    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?: ({ prefixCls, left }: 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>;
      /** String Enum, horizontal or vertical. Default `horizontal` */
      direction?: 'vertical' | 'horizontal';
      onChange?: (newAlpha: { a: number; }, offset: Interaction) => void;
    }
    interface PointerProps extends React.HTMLAttributes<HTMLDivElement> {
      prefixCls?: string;
      left?: string;
      top?: string;
    }

    License

    Licensed under the MIT License.

    Install

    npm i @uiw/react-color-alpha

    DownloadsWeekly Downloads

    2,564

    Version

    1.0.12

    License

    MIT

    Unpacked Size

    38.4 kB

    Total Files

    16

    Last publish

    Collaborators

    • wcjiang