React Color Github
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://x.com/jaywcjlove)
[](https://www.npmjs.com/package/@uiw/react-color-github)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-github/file/README.md)
Github Component is a subcomponent of [**`@react-color`**](https://uiwjs.github.io/react-color).
[](https://uiwjs.github.io/react-color/#/github)
## 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 (
<>
{
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 (
<>
{
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](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.
