{"id":20626851,"url":"https://github.com/mikbry/mui-color","last_synced_at":"2025-04-15T15:20:46.361Z","repository":{"id":43326773,"uuid":"435248533","full_name":"mikbry/mui-color","owner":"mikbry","description":"Preview of Material-UI-color picker port to Mui v5","archived":false,"fork":false,"pushed_at":"2022-08-29T11:10:54.000Z","size":684,"stargazers_count":34,"open_issues_count":9,"forks_count":27,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-10T14:17:31.231Z","etag":null,"topics":["colorpicker","mui","react","react-color"],"latest_commit_sha":null,"homepage":"","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}},"created_at":"2021-12-05T18:37:42.000Z","updated_at":"2025-01-04T02:36:23.000Z","dependencies_parsed_at":"2022-09-06T17:40:10.224Z","dependency_job_id":null,"html_url":"https://github.com/mikbry/mui-color","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikbry%2Fmui-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikbry%2Fmui-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikbry%2Fmui-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikbry%2Fmui-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikbry","download_url":"https://codeload.github.com/mikbry/mui-color/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249094939,"owners_count":21211837,"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":["colorpicker","mui","react","react-color"],"created_at":"2024-11-16T13:14:53.870Z","updated_at":"2025-04-15T15:20:46.316Z","avatar_url":"https://github.com/mikbry.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `mui-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/mui-color/workflows/Build%20and%20Deploy/badge.svg\n[action-url]: https://mikbry.github.io/mui-color/\n[codecov-image]: https://codecov.io/gh/mikbry/mui-color/branch/master/graph/badge.svg?token=K4P0vnM5fh\n[codecov-url]: https://codecov.io/gh/mikbry/mui-color\n[npm-image]: https://img.shields.io/npm/v/mui-color.svg\n[npm-url]: https://npmjs.org/package/mui-color\n[license-image]: https://img.shields.io/github/license/mikbry/mui-color\n[License-url]:https://github.com/mikbry/mui-color/blob/master/LICENSE\n[min-image]:https://badgen.net/bundlephobia/min/mui-color\n[min-url]:https://bundlephobia.com/result?p=mui-color\n[deps-svg]: https://david-dm.org/mikbry/mui-color.svg\n[deps-url]: https://david-dm.org/mikbry/mui-color\n[dev-deps-svg]: https://david-dm.org/mikbry/mui-color/dev-status.svg\n[dev-deps-url]: https://david-dm.org/mikbry/mui-color#info=devDependencies\n[peer-deps-svg]: https://david-dm.org/mikbry/mui-color/peer-status.svg\n[peer-deps-url]: https://david-dm.org/mikbry/mui-color#info=peerDependencies\n[downloads-image]: http://img.shields.io/npm/dm/mui-color.svg\n[downloads-url]: http://npm-stat.com/charts.html?package=mui-color\n\n# Preview port of Material-ui-color to Mui v5\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\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/mui-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/mui-color-qb4vm?file=/src/App.jsx\n\n- Typescript : https://codesandbox.io/s/mui-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 mui-color\n```\n\nOr using npm\n```bash\nnpm install mui-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`mui-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 'mui-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/mui-color/?path=/story/components-colorpicker--basic)\n\n### `\u003cColorBox /\u003e`\n\nA component to display a color tool box\n```javascript\nimport { ColorBox } from 'mui-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/mui-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 'mui-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/mui-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 'mui-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/mui-color/?path=/story/components-colorpalette--basic)\n\n### `\u003cColorButton /\u003e`\n\nDisplays a button filled with a color\n\n```javascript\nimport { ColorButton } from 'mui-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/mui-color/?path=/story/components-colorbutton--basic)\n\n## Roadmap\n\n### v1.0.0 - [Current version](https://github.com/mikbry/mui-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%2Fmui-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikbry%2Fmui-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikbry%2Fmui-color/lists"}