material-ui-color-components
Collections of color components for
material-ui
. No dependencies, small, highly customizable and theming support !
Contents
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
)
; const Container = <div> <ColorPicker defaultValue="transparent"/> </div>;
At first it display a button + an input
<ColorBox />
A component to display a color tool box
; const Container = <div> <ColorBox defaultValue="transparent"/> </div>;
<ColorInput />
An input component to display/edit color values in different format (plain, hex, rgb, hsl, hsv).
; const Container = <div> <ColorInput defaultValue="red"/> </div>;
<ColorPalette />
A component to display a grid of color buckets.
; 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'; const Container = <div> <ColorPalette palette=palette /> </div>;
<ColorButton />
Displays a button filled with a color
; const Container = <div> <ColorButton red="red"/> </div>;
Roadmap
Current version
v0.3.0 -- 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