### Installing react-color-palette using npm

Source: https://github.com/wondermarin/react-color-palette/blob/main/README.md

This snippet shows the command to install the `react-color-palette` package as a dependency to your project using the npm package manager.

```sh
npm install react-color-palette
```

--------------------------------

### Installing react-color-palette using Yarn

Source: https://github.com/wondermarin/react-color-palette/blob/main/README.md

This snippet shows the command to add the `react-color-palette` package as a dependency to your project using the Yarn package manager.

```sh
yarn add react-color-palette
```

--------------------------------

### Usage with ColorPicker Hook (RGB)

Source: https://github.com/wondermarin/react-color-palette/blob/main/README.md

This example shows how to initialize and use the `ColorPicker` component and `useColor` hook with an initial color specified in the `rgb()` functional notation.

```tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("rgb(86 30 203)");

  return <ColorPicker color={color} onChange={setColor} />;
}
```

--------------------------------

### Custom Layout with Saturation and Hue Components

Source: https://github.com/wondermarin/react-color-palette/blob/main/README.md

This example illustrates how to create a custom color picker layout by using the individual `Saturation` and `Hue` components exported by the library instead of the combined `ColorPicker`. It also shows initialization with an `hsl()` color value.

```tsx
import { Saturation, Hue, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("hsl(120 100% 50% / .5)");

  return (
    <div className="custom-layout">
      <Saturation height={300} color={color} onChange={setColor} />
      <Hue color={color} onChange={setColor} />
    </div>
  );
}
```

--------------------------------

### Basic Usage with ColorPicker Hook (HEX)

Source: https://github.com/wondermarin/react-color-palette/blob/main/README.md

This example demonstrates the standard usage of the `ColorPicker` component in a React functional component. It uses the `useColor` hook to manage the color state, initializing it with a hex value and providing the state and setter to the `ColorPicker` component.

```tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("#561ecb");

  return <ColorPicker color={color} onChange={setColor} />;
}
```

--------------------------------

### Usage with ColorPicker Hook (Named Color)

Source: https://github.com/wondermarin/react-color-palette/blob/main/README.md

This example demonstrates using the `ColorPicker` component and `useColor` hook with a named CSS color value as the initial color.

```tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("cyan");

  return <ColorPicker color={color} onChange={setColor} />;
}
```

--------------------------------

### Using onChangeComplete Callback

Source: https://github.com/wondermarin/react-color-palette/blob/main/README.md

This example demonstrates how to use the optional `onChangeComplete` callback prop on the `ColorPicker` component. This function is fired only when the user finishes interacting with the color picker (e.g., releases the mouse after dragging a handle), making it suitable for saving the final color value.

```tsx
import { ColorPicker, useColor, type IColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("#123123");

  const onChangeComplete = (color: IColor) => localStorage.setItem("color", color.hex);

  return <ColorPicker hideInput={["rgb", "hsv"]} color={color} onChange={setColor} onChangeComplete={onChangeComplete} />
}
```

--------------------------------

### Configuring ColorPicker for HEX Input Only

Source: https://github.com/wondermarin/react-color-palette/blob/main/README.md

This snippet shows how to hide the RGB and HSV input fields in the `ColorPicker` component by using the `hideInput` prop, leaving only the HEX input visible for the user.

```tsx
import { ColorPicker, useColor } from "react-color-palette";
import "react-color-palette/css";

export function App() {
  const [color, setColor] = useColor("#123123");

  return <ColorPicker hideInput={["rgb", "hsv"]} color={color} onChange={setColor} />
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.