@uiw/react-color-chrome

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 Chrome from '@uiw/react-color-chrome';
import { GithubPlacement } from '@uiw/react-color-github';

function Demo() {
  const [hex, setHex] = useState("#d29c9c53");
  return (
    <>
      <Chrome
        color={hex}
        style={{ float: 'left' }}
        placement={GithubPlacement.Right}
        onChange={(color) => {
          setHex(color.hexa);
        }}
      />
      <Chrome
        color={hex}
        placement={GithubPlacement.TopRight}
        onChange={(color) => {
          setHex(color.hexa);
        }}
      />
      <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;
}
export declare enum GithubPlacement {
  Left = "L",
  LeftTop = "LT",
  LeftBotton = "LB",
  Right = "R",
  RightTop = "RT",
  RightBotton = "RB",
  Top = "T",
  TopRight = "TR",
  TopLeft = "TL",
  Botton = "B",
  BottonLeft = "BL",
  BottonRight = "BR"
}

License

Licensed under the MIT License.