@uiw/react-color-chrome

^{Using my app is also a way to support me:}

React Color Chrome

Chrome Component is a subcomponent of @react-color.

Install

npm i @uiw/react-color-chrome

Usage

import React, { useState } from 'react';

import {
  HsvaColor,
  hsvaToRgbaString,
  color as handleColor,
  validHex,
  hexToHsva,
  hsvaToHex,
  hsvaToHexa,
} from '@uiw/color-convert';

import Chrome from '@uiw/react-color-chrome';
import { GithubPlacement } from '@uiw/react-color-github';

function Demo() {
  const [hsva, setHsva] = useState({ h:0, s:25.71, v:82.35, a:0.32});
  const hex = hsvaToHex(hsva)
  const hexa = hsvaToHexa(hsva)
  return (
    <>
      <Chrome
        color={hsva}
        style={{ float: 'left' }}
        placement={GithubPlacement.Right}
        onChange={(color) => {
          setHsva(color.hsva);
        }}
      />
      <Chrome
        color={hsva}
        placement={GithubPlacement.TopRight}
        onChange={(color) => {
          setHsva(color.hsva);
        }}
      />
      <Chrome
        color={hsva}
        style={{ marginTop: 10, width: 140 }}
        placement={GithubPlacement.TopRight}
        showEyeDropper={false}
        showColorPreview={false}
        showEditableInput={false}
        onChange={(color) => {
          setHsva(color.hsva);
        }}
      />
      <div style={{ background: hex, marginTop: 30, padding: 10 }}>
        {hex}
      </div>
      <div style={{ background: hexa, marginTop: 30, padding: 10 }}>
        {hexa}
      </div>
    </>
  );
}
export default Demo;

Disable the opacity setting by setting showAlpha to false.

import React, { useState } from 'react';

import {
  HsvaColor,
  hsvaToRgbaString,
  color as handleColor,
  validHex,
  hexToHsva,
  hsvaToHex,
  hsvaToHexa,
} from '@uiw/color-convert';

import Chrome from '@uiw/react-color-chrome';
import { GithubPlacement } from '@uiw/react-color-github';

function Demo() {
  const [hsva, setHsva] = useState({ h:0, s:25.71, v:82.35, a:0.32});
  const hex = hsvaToHex(hsva)
  return (
    <>
      <Chrome
        color={hsva}
        style={{ marginTop: 10 }}
        placement={GithubPlacement.TopRight}
        showAlpha={false}
        onChange={(color) => {
          setHsva(color.hsva);
        }}
      />
      <div style={{ background: hex, marginTop: 30, padding: 10 }}>
        {hex}
      </div>
    </>
  );
}
export default Demo;

Props

import React from 'react';
import { GithubProps } from '@uiw/react-color-github';
export declare enum ChromeInputType {
  HEXA = "hexa",
  RGBA = "rgba",
  HSLA = "hsla"
}
export interface ChromeProps extends Omit<GithubProps, 'colors'> {
  inputType?: ChromeInputType;
  showEditableInput?: boolean;
  showEyeDropper?: boolean;
  showColorPreview?: boolean;
  showHue?: boolean;
  showAlpha?: boolean;
}
declare const Chrome: React.ForwardRefExoticComponent<ChromeProps & React.RefAttributes<HTMLDivElement>>;
export default Chrome;

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.