React Color Chrome
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://x.com/jaywcjlove)
[](https://www.npmjs.com/package/@uiw/react-color-chrome)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-chrome/file/README.md)
Chrome Component is a subcomponent of [**`@react-color`**](https://uiwjs.github.io/react-color).
## Install
```bash
npm i @uiw/react-color-chrome
```
## Usage
```jsx mdx:preview
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 (
<>
{
setHsva(color.hsva);
}}
/>
{
setHsva(color.hsva);
}}
/>
{
setHsva(color.hsva);
}}
/>
{hex}
{hexa}
);
}
export default Demo;
```
Disable the opacity setting by setting `showAlpha` to `false`.
```jsx mdx:preview
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 (
<>
{
setHsva(color.hsva);
}}
/>
{hex}
);
}
export default Demo;
```
Set the `horizontal` value to `true`
```jsx mdx:preview
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 (
<>
{
setHsva(color.hsva);
}}
/>
{hex}
);
}
export default Demo;
```
## Props
```ts
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 {
inputType?: ChromeInputType;
showEditableInput?: boolean;
showEyeDropper?: boolean;
showColorPreview?: boolean;
showHue?: boolean;
showAlpha?: boolean;
}
declare const Chrome: React.ForwardRefExoticComponent>;
export default Chrome;
```
## Contributors
As always, thanks to our amazing contributors!
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.
