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

1.1.2 • Public • Published

React Color Colorful

npm bundle size npm version Open in unpkg

Colorful Component is a subcomponent of @react-color.

react-color-colorful

Install

npm i @uiw/react-color-colorful

Usage

import React, { useState } from 'react';
import Colorful from '@uiw/react-color-colorful';

function Demo() {
  const [hex, setHex] = useState("#59c09a");
  return (
    <>
      <Colorful
        color={hex}
        onChange={(color) => {
          setHex(color.hexa);
        }}
      />
      <div style={{ background: hex, marginTop: 30, padding: 10 }}>
        {hex}
      </div>
    </>
  );
}
export default Demo;
import React, { useState } from 'react';
import Colorful from '@uiw/react-color-colorful';

function Demo() {
  const [hex, setHex] = useState("#59c09a");
  const [disableAlpha, setDisableAlpha] = useState(false);
  return (
    <>
      <label>
        <input
          type="checkbox"
          checked={disableAlpha}
          onChange={(evn) => setDisableAlpha(evn.target.checked)}
        />
        {disableAlpha ? "Hide" : "Show"} Alpha
      </label>
      <Colorful
        color={hex}
        disableAlpha={disableAlpha}
        onChange={(color) => {
          setHex(color.hexa);
        }}
      />
      <div style={{ background: hex, marginTop: 30, padding: 10 }}>
        {hex}
      </div>
    </>
  );
}
export default Demo;

Props

import React from 'react';
import { HsvaColor, ColorResult } from '@uiw/color-convert';
export interface ColorfulProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
  prefixCls?: string;
  onChange?: (color: ColorResult) => void;
  color?: string | HsvaColor;
  disableAlpha?: boolean;
}

License

Licensed under the MIT License.

Install

npm i @uiw/react-color-colorful

DownloadsWeekly Downloads

1,297

Version

1.1.2

License

MIT

Unpacked Size

31.2 kB

Total Files

9

Last publish

Collaborators

  • uiwjs
  • wcjiang