material-ui-color-components

Collections of color components for material-ui. No dependencies, small, highly customizable and theming support !

Contents

• Why another ColorPicker?
• Documentation
• Requirements
• Install
• Usage
• Roadmap
• Contribute
• License

Why another ColorPicker ?

• Fully compatible with Material-UI : theming and low level components
• Styled with styled-components
• Highly customizable ColorPicker : gradient picker, palette, input format, deferred mode
• Small in size (<30kb) without any extra dependencies
• Use modern React hook and coding conventions
• Documentation made with Storybook, using Component Story Format and MDX

Documentation

Full documentation is available here :

https://mikbry.github.io/material-ui-color-components/

Requirements

• Works on modern browsers supporting ES6+ (Not compatible with IE)
• Latest React, Styled-Component and Material-UI frameworks

Install

yarn add material-ui-color-components

Or using npm

npm install material-ui-color-components

Usage

you need to have in your dependencies:

    "@material-ui/core": "^4.9.5",
    "material-ui-popup-state": "^1.5.3",
    "prop-types": "15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "styled-components": "^5.0.1"

material-ui-color-components bring 5 components.

<ColorPicker/>

A popover component to display a color tool box (use ColorBox)

import { ColorPicker } from 'material-ui-color-components';

export const Container = () => (
  <div>
    <ColorPicker defaultValue="transparent"/>
  </div>
);

At first it display a button + an input

ColorPicker documentation

<ColorBox />

A component to display a color tool box

import { ColorBox } from 'material-ui-color-components';

export const Container = () => (
  <div>
    <ColorBox defaultValue="transparent"/>
  </div>
);

ColorBox documentation

<ColorInput />

An input component to display/edit color values in different format (plain, hex, rgb, hsl, hsv).

import { ColorInput } from 'material-ui-color-components';

export const Container = () => (
  <div>
    <ColorInput defaultValue="red"/>
  </div>
);

ColorInput documentation

<ColorPalette />

A component to display a grid of color buckets.

import { ColorPalette } from 'material-ui-color-components';

const palette = {
  red: '#ff0000',
  blue: '#0000ff',
  green: '#00ff00',
  yellow: 'yellow',
  cyan: 'cyan',
  lime: 'lime',
  gray: 'gray',
  orange: 'orange',
  purple: 'purple',
  black: 'black',
  white: 'white',
  pink: 'pink',
  darkblue: 'darkblue',
};

export const Container = () => (
  <div>
    <ColorPalette palette={palette} />
  </div>
);

ColorPalette documentation

<ColorButton />

Displays a button filled with a color

import { ColorButton } from 'material-ui-color-components';

export const Container = () => (
  <div>
    <ColorButton red="red"/>
  </div>
);

ColorButton documentation

Roadmap

v0.3.0 - Current version

• add Typescript support
• accessibility : keyboard and touch support
• localization
• disable alpha property
• #30, #29, #22 resolved
• WIP - better documentation: colorType explained, i18n, typescript examples

v0.4.0 - WIP

• optimize code
• redesign inputs in ColorBox
• remove styled-components to have less dependencies and reduce size
• bugs fixes

v0.5.0 - planned

• rtl support
• ColorInput : display alpha and size according to MUi
• ColorInput : optional color box as left or right icon
• ColorPicker: left or right Colorbox
• bugs fixes

Contribute

Contributions welcome! Read the contribution guidelines first.

License

Released under MIT License