MUI Color Input

https://viclafouch.github.io/mui-color-input/
Admin
MUI Color Input is a color input component designed for the MUI React library and built with...
Tokens:5,034
Snippets:43
Trust Score:9.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install mui-color-input with npm or yarn

Source: https://viclafouch.github.io/mui-color-input/docs/getting-started

Install the mui-color-input package using either npm or yarn. The npm command includes the --save flag to add it to dependencies.

```bash
npm install mui-color-input --save  

```

```bash
yarn add mui-color-input  

```

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

### MuiColorInput

Source: https://viclafouch.github.io/mui-color-input/docs/api-reference

Documentation for the MuiColorInput component, including its props and usage examples.

```APIDOC
## MuiColorInput

### Description
A color input component that allows users to select or type a color value. It supports various color formats and provides a color picker popover.

### Props

#### `value`
- **Type**: `MuiColorInputValue`
- **Required**: `true`
- **Description**: The color value. The string parsing is very permissive, allowing various formats such as hex, RGB, HSL, HSV, and their alpha variants. Examples include `"#000"`, `"rgb (255, 0, 0)"`, `"hsl(0, 100%, 50%)"`, `"hsv(0, 100%, 50%)"`, and object forms like `{ r: 255, g: 0, b: 0 }`.

#### `onChange`
- **Default**: `undefined`
- **Type**: `(color: string, colors: MuiColorInputColors) => void`
- **Required**: `false`
- **Description**: Called when the user updates the color value. Provides the new color value stringified and an object with the color in different formats (`hex`, `hex8`, `hsl`, `hsv`, `rgb`).

#### `format`
- **Default**: `"rgb"`
- **Type**: `MuiColorInputFormat`
- **Required**: `false`
- **Description**: The format to use for the color value. The first parameter of `onChange` respects this format. Available formats: `hex`, `hex8`, `hsl`, `hsv`, `rgb`.

#### `fallbackValue`
- **Default**: `"black"`
- **Type**: `MuiColorInputValue`
- **Required**: `false`
- **Description**: A fallback color value used when the user inputs an invalid color.

#### `isAlphaHidden`
- **Default**: `false`
- **Type**: `boolean`
- **Required**: `false`
- **Description**: Whether to hide the alpha channel input controls.

#### `adornmentPosition`
- **Default**: `"start"`
- **Type**: `"start" | "end"`
- **Required**: `false`
- **Description**: The position of the color button adornment relative to the text input.

#### `disablePopover`
- **Default**: `false`
- **Type**: `boolean`
- **Required**: `false`
- **Description**: Whether to disable the color picker popover. When `true`, clicking the color button will not open the popover.

#### `Adornment`
- **Default**: `MuiColorInputButton`
- **Type**: `(props: MuiColorButtonProps) => React.ReactNode`
- **Required**: `false`
- **Description**: A custom component to replace the default color button adornment.

#### `PopoverProps`
- **Default**: `undefined`
- **Type**: `PopoverProps`
- **Required**: `false`
- **Description**: Props passed to the MUI Popover component (except `anchorEl`, `open`, and `children` which are managed internally).

### Examples

#### Hex, 8-digit (RGBA) Hex
```jsx
<MuiColorInput value="#000" />
<MuiColorInput value="000" />
<MuiColorInput value="#369C" />
<MuiColorInput value="#f0f0f6" />
<MuiColorInput value="#f0f0f688" />
<MuiColorInput value="f0f0f688" />
```

#### RGB, RGBA
```jsx
<MuiColorInput value="rgb (255, 0, 0)" />
<MuiColorInput value="rgb 255 0 0" />
<MuiColorInput value="rgba (255, 0, 0, .5)" />
<MuiColorInput value={{ r: 255, g: 0, b: 0 }} />
```

#### HSL, HSLA
```jsx
<MuiColorInput value="hsl(0, 100%, 50%)" />
<MuiColorInput value="hsla(0, 100%, 50%, .5)" />
<MuiColorInput value="hsl 0 1.0 0.5" />
<MuiColorInput value={{ h: 0, s: 1, l: 0.5 }} />
```

#### HSV, HSVA
```jsx
<MuiColorInput value="hsv(0, 100%, 50%)" />
<MuiColorInput value="hsva(0, 100%, 50%, .5)" />
<MuiColorInput value="hsv (0 100% 100%)" />
<MuiColorInput value={{ h: 0, s: 100, v: 100 }} />
```

#### onChange Example
```jsx
const handleChange = (color, colors) => {
  /**
  color: "#ffffff"
  colors: {
    hex: "#ffffff",
    hex8: "#ffffffff",
    hsl: "hsl(0, 0%, 100%)",
    hsv: "hsv(0, 0%, 100%)",
    rgb: "rgb(255, 255, 255)"
  }
  **/
}

<MuiColorInput onChange={handleChange} />
```

#### format Example
```jsx
<MuiColorInput format="hex" />
<MuiColorInput format="hex8" />
<MuiColorInput format="rgb" />
<MuiColorInput format="hsv" />
<MuiColorInput format="hsl" />
```

#### fallbackValue Example
```jsx
<MuiColorInput fallbackValue="#ffffff" />
<MuiColorInput fallbackValue="#ffffffff" />
<MuiColorInput fallbackValue="hsv(0, 0%, 100%)" />
<MuiColorInput fallbackValue="rgb(255, 255, 255)" />
<MuiColorInput fallbackValue={{ h: 0, s: 100, v: 100 }} />
```

#### isAlphaHidden Example
```jsx
<MuiColorInput isAlphaHidden />
```

#### adornmentPosition Example
```jsx
<MuiColorInput adornmentPosition="end" />
```

#### disablePopover Example
```jsx
<MuiColorInput disablePopover />
```

#### Adornment Example
```jsx
const MyCustomButton = (props) => {
  return <button style={{ backgroundColor: props.bgColor }} {...props} />
}

<MuiColorInput Adornment={MyCustomButton} />
```

#### PopoverProps Example
```jsx
<MuiColorInput PopoverProps={{ anchorOrigin: { vertical: 'bottom', horizontal: 'left' } }} />
```
```

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

### MuiColorInput format prop examples

Source: https://viclafouch.github.io/mui-color-input/docs/api-reference

Shows the `format` prop with all available formats: `hex`, `hex8`, `hsl`, `hsv`, and `rgb`. The first parameter of `onChange` respects this format.

```jsx
<MuiColorInput format="hex" />  
<MuiColorInput format="hex8" />  
<MuiColorInput format="rgb" />  
<MuiColorInput format="hsv" />  
<MuiColorInput format="hsl" />  

```

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

### MuiColorInput isAlphaHidden prop example

Source: https://viclafouch.github.io/mui-color-input/docs/api-reference

Shows the `isAlphaHidden` prop, which hides the alpha channel input controls.

```jsx
<MuiColorInput isAlphaHidden />  

```

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

### MuiColorInput onChange callback example

Source: https://viclafouch.github.io/mui-color-input/docs/api-reference

Shows the `onChange` callback signature. It receives the new color as a string and an object with the color in `hex`, `hex8`, `hsl`, `hsv`, and `rgb` formats.

```jsx
const handleChange = (color, colors) => {  
  /**  
  color: "#ffffff"  
  colors: {  
    hex: "#ffffff",  
    hex8: "#ffffffff",  
    hsl: "hsl(0, 0%, 100%)",  
    hsv: "hsv(0, 0%, 100%)",  
    rgb: "rgb(255, 255, 255)"  
  }  
  **/  
}  
  
<MuiColorInput onChange={handleChange} />  

```

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

### MuiColorInput adornmentPosition prop example

Source: https://viclafouch.github.io/mui-color-input/docs/api-reference

Shows the `adornmentPosition` prop set to `"end"` to place the color button adornment at the end of the input.

```jsx
<MuiColorInput adornmentPosition="end" />  

```

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

### MuiColorInput value prop: RGB and RGBA examples

Source: https://viclafouch.github.io/mui-color-input/docs/api-reference

Shows accepted string and object formats for the `value` prop: RGB and RGBA. RGB input requires either 0-255 or 0%-100%.

```jsx
<MuiColorInput value="rgb (255, 0, 0)" />  
<MuiColorInput value="rgb 255 0 0" />  
<MuiColorInput value="rgba (255, 0, 0, .5)" />  
<MuiColorInput value={{ r: 255, g: 0, b: 0 }} />  

```

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

### Using MuiColorInput with TypeScript

Source: https://viclafouch.github.io/mui-color-input/docs/typescript

An example demonstrating how to import and use the MuiColorInput component along with its associated types like MuiColorInputValue, MuiColorInputColors, and MuiColorInputFormat. Props are defined within the MuiColorInputProps interface.

```typescript
import React from 'react'  
import {  
  MuiColorInput,  
  type MuiColorInputValue,  
  type MuiColorInputColors,  
  type MuiColorInputFormat,  
  type MuiColorInputProps  
} from 'mui-color-input'  
  
const MyComponent = () => {  
  const [value, setValue] = React.useState<MuiColorInputValue>('#ffffff')  
  
  const handleChange = (newValue: string, colors: MuiColorInputColors) => {  
    setValue(newValue)  
  }  
  
  const format: MuiColorInputFormat = 'hex'  
  
  return <MuiColorInput value={value} onChange={handleChange} format={format} />  
}  
```

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

### MuiColorInput PopoverProps prop example

Source: https://viclafouch.github.io/mui-color-input/docs/api-reference

Shows the `PopoverProps` prop, which passes props to the MUI Popover component. `anchorEl`, `open`, and `children` are managed internally.

```jsx
<MuiColorInput PopoverProps={{ anchorOrigin: { vertical: 'bottom', horizontal: 'left' } }} />  

```

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

### MuiColorInput value prop: HSV and HSVA examples

Source: https://viclafouch.github.io/mui-color-input/docs/api-reference

Shows accepted string and object formats for the `value` prop: HSV and HSVA. HSV requires either 0%-100% or 0-1 for S/V, and hue can be 0%-100% or 0-360.

```jsx
<MuiColorInput value="hsv(0, 100%, 50%)" />  
<MuiColorInput value="hsva(0, 100%, 50%, .5)" />  
<MuiColorInput value="hsv (0 100% 100%)" />  
<MuiColorInput value={{ h: 0, s: 100, v: 100 }} />  

```

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

### MuiColorInput fallbackValue prop examples

Source: https://viclafouch.github.io/mui-color-input/docs/api-reference

Shows the `fallbackValue` prop with various color formats. It is used when the user enters an invalid color value.

```jsx
<MuiColorInput fallbackValue="#ffffff" />  
<MuiColorInput fallbackValue="#ffffffff" />  
<MuiColorInput fallbackValue="hsv(0, 0%, 100%)" />  
<MuiColorInput fallbackValue="rgb(255, 255, 255)" />  
<MuiColorInput fallbackValue={{ h: 0, s: 100, v: 100 }} />  

```

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

### MuiColorInput disablePopover prop example

Source: https://viclafouch.github.io/mui-color-input/docs/api-reference

Shows the `disablePopover` prop, which prevents the color picker popover from opening when the color button is clicked.

```jsx
<MuiColorInput disablePopover />  

```

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

### Style MuiColorInput with styled-components or emotion

Source: https://viclafouch.github.io/mui-color-input/docs/css

Style MuiColorInput with styled-components or emotion by wrapping it in a styled component. The example targets the .MuiColorInput-AlphaSlider global class to add a margin-top of 10px.

```jsx
import { styled } from 'styled-components' // or emotion  
import { MuiColorInput } from 'mui-color-input'  
  
const MuiColorInputStyled = styled(MuiColorInput)`  
  & .MuiColorInput-AlphaSlider {  
    margin-top: 10px;  
  }  
`  
  
function MyComponent() {  
  return <MuiColorInputStyled />  
}  
```

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

### MuiColorInput value prop: HSL and HSLA examples

Source: https://viclafouch.github.io/mui-color-input/docs/api-reference

Shows accepted string and object formats for the `value` prop: HSL and HSLA. HSL requires either 0%-100% or 0-1 for S/L, and hue can be 0%-100% or 0-360.

```jsx
<MuiColorInput value="hsl(0, 100%, 50%)" />  
<MuiColorInput value="hsla(0, 100%, 50%, .5)" />  
<MuiColorInput value="hsl 0 1.0 0.5" />  
<MuiColorInput value={{ h: 0, s: 1, l: 0.5 }} />  

```

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

### MuiColorInput value prop: Hex and 8-digit Hex examples

Source: https://viclafouch.github.io/mui-color-input/docs/api-reference

Shows accepted string formats for the `value` prop: hex and 8-digit RGBA hex. The parser is permissive, allowing optional commas, percentages, and parentheses.

```jsx
<MuiColorInput value="#000" />  
<MuiColorInput value="000" />  
<MuiColorInput value="#369C" />  
<MuiColorInput value="#f0f0f6" />  
<MuiColorInput value="#f0f0f688" />  
<MuiColorInput value="f0f0f688" />  

```

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

### MuiColorInput Adornment prop custom component example

Source: https://viclafouch.github.io/mui-color-input/docs/api-reference

Shows a custom `Adornment` component that replaces the default color button. The custom component receives the color via `props.bgColor`.

```jsx
const MyCustomButton = (props) => {  
  return <button style={{ backgroundColor: props.bgColor }} {...props} />  
}  
  
<MuiColorInput Adornment={MyCustomButton} />  

```

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

### Configure Next.js transpilePackages for mui-color-input

Source: https://viclafouch.github.io/mui-color-input/docs/getting-started

Configure Next.js to transpile the mui-color-input package, which is an ESM package, by adding it to the transpilePackages array in next.config.mjs.

```javascript
// next.config.mjs  
/** @type {import('next').NextConfig} */  
const nextConfig = {  
 transpilePackages: ['mui-color-input'],  
 // your config  
}  

export default nextConfig  

```

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

### Apply TextField props to MuiColorInput

Source: https://viclafouch.github.io/mui-color-input/docs/inheritance

Demonstrates using standard TextField props like size, variant, and disabled on the MuiColorInput component.

```jsx
<MuiColorInput size="small" variant="outlined" disabled />
```

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

### Simple usage of MuiColorInput component

Source: https://viclafouch.github.io/mui-color-input/docs/getting-started

Basic usage of the MuiColorInput component with a controlled color state. The component receives the current color value and an onChange handler to update it.

```jsx
import React from 'react'  
import { MuiColorInput } from 'mui-color-input'  

const MyComponent = () => {  
  const [color, setColor] = React.useState('#ffffff')  

  const handleChange = (color) => {  
    setColor(color)  
  }  

  return (  
    <MuiColorInput value={color} onChange={handleChange} />  
  )  
}  

```

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

### Integrate MuiColorInput with React Hook Form

Source: https://viclafouch.github.io/mui-color-input/docs/react-hook-form

Use this snippet to integrate MuiColorInput with React Hook Form. It sets a default color value, validates the input with matchIsValidColor, and displays an error message when the color is invalid. The form submits the color value as JSON via an alert.

```jsx
import React from "react";  
import ReactDOM from "react-dom";  
import Button from "@mui/material/Button";  
import { MuiColorInput, matchIsValidColor } from "mui-color-input";  
import { Controller, useForm } from "react-hook-form";  
  
const App = () => {  
  const { control, handleSubmit } = useForm({  
    defaultValues: {  
      color: "#ffffff"  
    }  
  });  
  
  const onSubmit = (data) => {  
    alert(JSON.stringify(data));  
  };  
  
  return (  
    <form onSubmit={handleSubmit(onSubmit)}>  
      <Controller  
        name="color"  
        control={control}  
        rules={{ validate: matchIsValidColor }}  
        render={({ field, fieldState }) => (  
          <MuiColorInput  
            {...field}  
            format="hex"  
            helperText={fieldState.invalid ? "Color is invalid" : ""}  
            error={fieldState.invalid}  
          />  
        )}  
      />  
     <div>  
        <Button type="submit" variant="contained" sx={{ mt: 2 }}>  
          Submit  
        </Button>  
      </div>  
    </form>  
  )  
}  

```

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

### Override MuiColorInput styles with className

Source: https://viclafouch.github.io/mui-color-input/docs/css

Use the className prop to apply custom classes to the MuiColorInput component. Then target its global class names, such as .MuiColorInput-HueSlider, to override styles.

```jsx
<MuiColorInput className="my-class-name" />  
```

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

### Validate color with matchIsValidColor

Source: https://viclafouch.github.io/mui-color-input/docs/color-validation

Use the matchIsValidColor function to check if a color string is valid within a React component.

```javascript
import React from 'react'  
import { MuiColorInput, matchIsValidColor } from 'mui-color-input'  
  
const MyComponent = () => {  
  const [value, setValue] = React.useState('#ffffff')  
  
  const handleChange = (newValue) => {  
    matchIsValidColor(newValue) // boolean  
  }  
  
  return <MuiColorInput value={value} onChange={handleChange} />  
}  
```
Tokens:
Raw