@uiw/react-color-chrome v2.3.4
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)
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>
</>
);
}
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.
12 days ago
24 days ago
3 months ago
3 months ago
7 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago