Installation

// with npm
npm install @sherifmagdy/mui-color-input

// with yarn
yarn add @sherifmagdy/mui-color-input

// with pnpm
pnpm add @sherifmagdy/mui-color-input

The component uses @ctrl/tinycolor for color parsing and formatting.

Usage

import React from 'react'
import { MuiColorInput } from '@sherifmagdy/mui-color-input'

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

  const handleChange = (newValue) => {
    setValue(newValue)
  }

  return <MuiColorInput format="hex" value={value} onChange={handleChange} />
}

Slots & slotProps (v10)

MuiColorInput follows MUI's canonical composition API. Each internal part is overridable through slots, and any prop can be forwarded to the matching part through slotProps.

| Slot | Default component | Renders | | ------------- | --------------------- | ---------------------------- | | root | Box | The wrapping <span> | | textField | ColorTextField | The text input | | adornment | MuiColorInputButton | The color swatch button | | popover | ColorPopover | The dropdown | | popoverBody | ColorPopoverBody | The popover's inner controls |

<MuiColorInput
  value={value}
  format="rgb"
  onChange={handleChange}
  slotProps={{
    textField: { label: 'Color', color: 'warning', fullWidth: true },
    adornment: { position: 'end', sx: { width: 40, height: 40 } },
    popover: { PaperProps: { sx: { width: 300 } } },
    popoverBody: { isAlphaHidden: true }
  }}
/>

Migrating from v9 to v10

v10 replaces the ad-hoc props with the slots / slotProps pattern. Map your existing props as follows:

| v9 | v10 | | ------------------------------------------- | ----------------------------------------------------------- | | adornmentPosition="end" | slotProps={{ adornment: { position: 'end' } }} | | Adornment={CustomBtn} | slots={{ adornment: CustomBtn }} | | AdornmentProps={{ sx }} | slotProps={{ adornment: { sx } }} | | PopoverProps={{ ... }} | slotProps={{ popover: { ... } }} | | <MuiColorInput label="..." color="..." /> | slotProps={{ textField: { label: '...', color: '...' } }} |

Breaking: the ref now resolves to the root <span class="MuiColorInput-Root"> wrapper (in v9 it targeted the text field's root <div>).

See the full API reference for every prop, slot, and type.

Next.js integration

Learn how to use MUI color input with Next.js

Once you have installed @sherifmagdy/mui-color-input in your next.js project, it is important to transpile it as it is an ESM package first.

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

export default nextConfig

Documentation

Changelog

Go to GitHub Releases

TypeScript

This library comes with TypeScript "typings". If you happen to find any bugs in those, create an issue.

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

LICENSE

MIT