{"id":20626824,"url":"https://github.com/mikbry/material-ui-color","last_synced_at":"2025-04-05T03:09:13.418Z","repository":{"id":40289295,"uuid":"243068385","full_name":"mikbry/material-ui-color","owner":"mikbry","description":"The lightest colorpicker, palette, colorinput, colorbutton ⚡ No dependencies. It uses React hooks, support Typescript theming and more !","archived":false,"fork":false,"pushed_at":"2023-03-02T18:42:58.000Z","size":11844,"stargazers_count":147,"open_issues_count":35,"forks_count":34,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T02:05:06.038Z","etag":null,"topics":["color-palette","colorbox","colorbutton","colorinput","colorpicker","component","es6","hooks","material-ui","material-ui-color-picker","npm","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://mikbry.github.io/material-ui-color/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mikbry.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-25T18:18:40.000Z","updated_at":"2024-12-10T17:43:26.000Z","dependencies_parsed_at":"2024-06-18T13:42:43.285Z","dependency_job_id":"348a9258-9dfa-4756-bd02-89b176d39b23","html_url":"https://github.com/mikbry/material-ui-color","commit_stats":{"total_commits":167,"total_committers":20,"mean_commits":8.35,"dds":0.6646706586826348,"last_synced_commit":"5c26db124fa68b3bd79ecf6fd1c78d1445c46e0e"},"previous_names":["mikbry/material-ui-colorpicker"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikbry%2Fmaterial-ui-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikbry%2Fmaterial-ui-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikbry%2Fmaterial-ui-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikbry%2Fmaterial-ui-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikbry","download_url":"https://codeload.github.com/mikbry/material-ui-color/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280272,"owners_count":20912967,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color-palette","colorbox","colorbutton","colorinput","colorpicker","component","es6","hooks","material-ui","material-ui-color-picker","npm","reactjs","typescript"],"created_at":"2024-11-16T13:14:48.900Z","updated_at":"2025-04-05T03:09:13.396Z","avatar_url":"https://github.com/mikbry.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `material-ui-color` picker and other components\n\n[![Build Status][action-image]][action-url]\n[![codecov][codecov-image]][codecov-url]\n[![NPM version][npm-image]][npm-url]\n[![License][license-image]][license-url]\n[![minisize][min-image]][min-url]\n[![dependency status][deps-svg]][deps-url]\n[![dev dependency status][dev-deps-svg]][dev-deps-url]\n[![peer dependency status][peer-deps-svg]][peer-deps-url]\n[![Downloads][downloads-image]][downloads-url]\n\n[action-image]: https://github.com/mikbry/material-ui-color/workflows/Build%20and%20Deploy/badge.svg\n[action-url]: https://mikbry.github.io/material-ui-color/\n[codecov-image]: https://codecov.io/gh/mikbry/material-ui-color/branch/master/graph/badge.svg?token=K4P0vnM5fh\n[codecov-url]: https://codecov.io/gh/mikbry/material-ui-color\n[npm-image]: https://img.shields.io/npm/v/material-ui-color.svg\n[npm-url]: https://npmjs.org/package/material-ui-color\n[license-image]: https://img.shields.io/github/license/mikbry/material-ui-color\n[License-url]:https://github.com/mikbry/material-ui-color/blob/master/LICENSE\n[min-image]:https://badgen.net/bundlephobia/min/material-ui-color\n[min-url]:https://bundlephobia.com/result?p=material-ui-color\n[deps-svg]: https://david-dm.org/mikbry/material-ui-color.svg\n[deps-url]: https://david-dm.org/mikbry/material-ui-color\n[dev-deps-svg]: https://david-dm.org/mikbry/material-ui-color/dev-status.svg\n[dev-deps-url]: https://david-dm.org/mikbry/material-ui-color#info=devDependencies\n[peer-deps-svg]: https://david-dm.org/mikbry/material-ui-color/peer-status.svg\n[peer-deps-url]: https://david-dm.org/mikbry/material-ui-color#info=peerDependencies\n[downloads-image]: http://img.shields.io/npm/dm/material-ui-color.svg\n[downloads-url]: http://npm-stat.com/charts.html?package=material-ui-color\n\n\u003e Collections of color components for [material-ui](https://github.com/mui-org/material-ui). No dependencies, small, highly customizable and theming support !\n\n![Video of ColorPicker](./images/muicc-v0-2.webp)\n\n## Contents\n\n- [Why another ColorPicker?](#why-another-colorpicker)\n- [Documentation](#documentation)\n- [Requirements](#requirements)\n- [Install](#install)\n- [Usage](#usage)\n- [Roadmap](#roadmap)\n- [Contribute](#contribute)\n- [License](#license)\n\n## Why another ColorPicker ?\n\n- Fully compatible with Material-UI : theming and low level components\n- Highly customizable ColorPicker : gradient picker, palette, input format, deferred mode\n-  Small in size (\u003c30kb) without any direct dependencies\n- Use modern React hook and coding conventions\n- Documentation made with Storybook, using Component Story Format and MDX\n\n## Documentation\n\nFull documentation is available here :\n\nhttps://mikbry.github.io/material-ui-color/\n\n### Examples \n\n\u003e You can find examples [here](EXAMPLES.md) and [here](/examples).\n\nAlso in codesanbox\n\n- Javascript : https://codesandbox.io/s/material-ui-color-qb4vm?file=/src/App.jsx\n\n- Typescript : https://codesandbox.io/s/material-ui-color-picker-qvcg3?file=/src/App.tsx\n\n\n## Requirements\n- Works on modern browsers supporting ES6+ (Not compatible with IE)\n- React and Material-UI frameworks\n\n## Install\n\n```bash\nyarn add material-ui-color\n```\n\nOr using npm\n```bash\nnpm install material-ui-color\n```\n\n## Usage\n\nyou need to have in your dependencies:\n\n```\n    \"@mui/material\": \"^4.11.2\",\n    \"material-ui-popup-state\": \"^1.7.1\",\n    \"prop-types\": \"^15.7.2\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n```\n\n`material-ui-color` bring 5 components.\n\n### `\u003cColorPicker/\u003e`\n\nA popover component to display a color tool box. It uses `ColorBox` and `material-ui-popup-state`.\n\n```javascript\nimport { ColorPicker } from 'material-ui-color';\n\nexport const Container = () =\u003e (\n  \u003cdiv\u003e\n    \u003cColorPicker defaultValue=\"transparent\"/\u003e\n  \u003c/div\u003e\n);\n```\n\nAt first it display a button + an input\n\n[ColorPicker documentation](https://mikbry.github.io/material-ui-color/?path=/story/components-colorpicker--basic)\n\n### `\u003cColorBox /\u003e`\n\nA component to display a color tool box\n```javascript\nimport { ColorBox } from 'material-ui-color';\n\nexport const Container = () =\u003e (\n  \u003cdiv\u003e\n    \u003cColorBox defaultValue=\"transparent\"/\u003e\n  \u003c/div\u003e\n);\n```\n\n[ColorBox documentation](https://mikbry.github.io/material-ui-color/?path=/story/components-colorbox--basic)\n\n### `\u003cColorInput /\u003e`\n\nAn input component to display/edit color values in different format (plain, hex, rgb, hsl, hsv).\n\n```javascript\nimport { ColorInput } from 'material-ui-color';\n\nexport const Container = () =\u003e (\n  \u003cdiv\u003e\n    \u003cColorInput defaultValue=\"red\"/\u003e\n  \u003c/div\u003e\n);\n```\n\n[ColorInput documentation](https://mikbry.github.io/material-ui-color/?path=/story/components-colorinput--basic)\n\n### `\u003cColorPalette /\u003e`\n\nA component to display a grid of color buckets.\n\n```javascript\nimport { ColorPalette } from 'material-ui-color';\n\nconst palette = {\n  red: '#ff0000',\n  blue: '#0000ff',\n  green: '#00ff00',\n  yellow: 'yellow',\n  cyan: 'cyan',\n  lime: 'lime',\n  gray: 'gray',\n  orange: 'orange',\n  purple: 'purple',\n  black: 'black',\n  white: 'white',\n  pink: 'pink',\n  darkblue: 'darkblue',\n};\n\nexport const Container = () =\u003e (\n  \u003cdiv\u003e\n    \u003cColorPalette palette={palette} /\u003e\n  \u003c/div\u003e\n);\n```\n\n[ColorPalette documentation](https://mikbry.github.io/material-ui-color/?path=/story/components-colorpalette--basic)\n\n### `\u003cColorButton /\u003e`\n\nDisplays a button filled with a color\n\n```javascript\nimport { ColorButton } from 'material-ui-color';\n\nexport const Container = () =\u003e (\n  \u003cdiv\u003e\n    \u003cColorButton color=\"red\"/\u003e\n  \u003c/div\u003e\n);\n```\n\n[ColorButton documentation](https://mikbry.github.io/material-ui-color/?path=/story/components-colorbutton--basic)\n\n## Roadmap\n\n### v1.0.0 - [Current version](https://github.com/mikbry/material-ui-color/releases/tag/v1.0.0)\n- remove `styled-components` to have less dependencies and reduce size\n- display wrong color using a red checked box\n- bugs fixes\n\n## Contribute\n\nContributions welcome! Read the [contribution guidelines](CONTRIBUTING.md) first.\n\n\n## License\n\nReleased under MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikbry%2Fmaterial-ui-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikbry%2Fmaterial-ui-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikbry%2Fmaterial-ui-color/lists"}