@uiw/react-color-github
v2.9.4TypeScript
Color Github Picker
reactreact-colorreact-componentcolor-pickercolorpickercolor pickercolorfulreact-color-githubgithubpicker
0/weekUpdated 1 weeks agoMITUnpacked: 40.2 KB
Published by Kenny Wong
npm install @uiw/react-color-github
React Color Github
===
  
Github Component is a subcomponent of @react-color.
Install
``bash`
npm i @uiw/react-color-github
Usage
`jsx mdx:preview
import React, { useState } from 'react';
import Github from '@uiw/react-color-github';
export default function Demo() {
const [hex, setHex] = useState("#fff");
return (
<>
style={{
'--github-background-color': '#d1eff9'
}}
onChange={(color) => {
setHex(color.hex);
}}
/>
);
}
`
Add clear button
jsx mdx:preview
import React, { useState } from 'react';
import Github from '@uiw/react-color-github';export default function Demo() {
const [hex, setHex] = useState("#fff");
return (
<>
style={{
'--github-background-color': '#d1eff9'
}}
onChange={(color) => {
setHex(color.hex);
}}
rectRender={(props) => {
if (props.key == 15) {
return
}
}}
/>
);
}
`Props
ts
import React from 'react';
import { HsvaColor, ColorResult } from '@uiw/color-convert';
import { SwatchProps, SwatchRectRenderProps } from '@uiw/react-color-swatch';
export declare enum GithubPlacement {
Left = "L",
LeftTop = "LT",
LeftBottom = "LB",
Right = "R",
RightTop = "RT",
RightBottom = "RB",
Top = "T",
TopRight = "TR",
TopLeft = "TL",
Bottom = "B",
BottomLeft = "BL",
BottomRight = "BR"
}
export interface GithubRectRenderProps extends SwatchRectRenderProps {
arrow?: JSX.Element;
}
export interface GithubProps extends Omit {
placement?: GithubPlacement;
color?: string | HsvaColor;
showTriangle?: boolean;
onChange?: (color: ColorResult) => void;
}
declare const Github: React.ForwardRefExoticComponent>;
export default Github;
``Contributors
As always, thanks to our amazing contributors!
Made with contributors.
License
Licensed under the MIT License.