npm
Sign UpSign In

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

2.10.3 • Public • Published
Using my app is also a way to support me:
Zipora: Zip/RAR/7Z Unarchiver Scap: Screenshot & Markup Edit Screen Test Deskmark Keyzer Vidwall Hub VidCrop Vidwall Mousio Hint Mousio Musicer Audioer FileSentinel FocusCursor Videoer KeyClicker DayBar Iconed Menuist Quick RSS Quick RSS Web Serve Copybook Generator DevTutor for SwiftUI RegexMate Time Passage Iconize Folder Textsound Saver Create Custom Symbols DevHub Resume Revise Palette Genius Symbol Scribe

React Color Chrome

Buy me a coffee Follow On X npm version Open in unpkg

Chrome Component is a subcomponent of @react-color.

react-color-chrome

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;

Set the horizontal value to true

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}
        horizontal={true}
        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.

Readme

Keywords