Color Picker Component Package for Chakra UI
Codesandbox Link Here
NPM Link Here
npm i chakra-color-pickerimport { Flex, FormControl, ChakraProvider, theme } from "@chakra-ui/react";
import * as React from "react";
import { ColorPicker } from "chakra-color-picker";
export default function App() {
const handleColorChange = (value) => {
console.log(value);
};
return (
<ChakraProvider theme={theme}>
<Flex pt="48" justify="center" align="center" w="full">
<ColorPicker onChange={handleColorChange} />
</Flex>
</ChakraProvider>
);
}| Name |
Type | Required | Default | Description |
|---|---|---|---|---|
| onChange | function | true | - | Returns color value as a string to the function provided. |
| colors | string[] | false | [ "gray.500", "red.500", "orange.500", "yellow.500", "green.500", "teal.500", "blue.500", "cyan.500", "purple.500", "pink.500", ] | Accepts an array of color values that will override the default values. |
| bg | string | false | "white" | Changes the background color of the PopoverContent. |
| placement | "top" | "right" | "bottom" | "left" | "auto" | "end" | "start" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | ... 6 more ... | false | "bottom" | The placement of the popper relative to its reference. |
| isDisabled | boolean | false | false | If true, sets the color picker to be disabled. |
- Clone this repository
git clone https://github.com/Buupu/chakra-color-picker.git- Install all dependencies
npm i- Install package example dependencies
cd example
npm i- Start the package server, and the example server
# root directory
npm start
# example directory
npm run dev
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent