{"_id":"@dmitrychebayewski/material-ui-4-color","_rev":"1-87e7ceffc3527f05ad69b8ee3aeeb5a5","name":"@dmitrychebayewski/material-ui-4-color","dist-tags":{"latest":"1.2.5"},"versions":{"1.2.5":{"name":"@dmitrychebayewski/material-ui-4-color","version":"1.2.5","description":"The lightest colorpicker for React Material-Ui. No dependencies. It uses Hooks and support Typescript, and more !","main":"index.js","module":"./esm/index.js","typings":"index.d.ts","homepage":"https://mikbry.github.io/material-ui-color/","repository":{"type":"git","url":"git+https://github.com/dmitrychebayewski/material-ui-color.git#props_to_text_field"},"bugs":{"url":"https://github.com/dmitrychebayewski/material-ui-color/issues"},"author":{"name":"Mik","email":"mik@miklabs.com"},"license":"MIT","keywords":["react","color picker","react-component","colorpicker","picker","tiny","color","material-ui","material design","react-color","typescript"],"peerDependencies":{"@material-ui/core":"^4.9.5","material-ui-popup-state":"^1.5.3","prop-types":"^15.7.2","react":"^16.0.0 || ^17.0.0","react-dom":"^16.0.0 || ^17.0.0"},"dependencies":{},"gitHead":"33e957ea8707d98b0eff49a95b71a0da3092ae6f","_id":"@dmitrychebayewski/material-ui-4-color@1.2.5","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-76t9rkPG42rXaYXancqE3NCmp/ZG9+YymJW+ohiI+Z02cMVf/zuoykjd43NDaE81AEzxPB1+rFkGYEovbyyO4A==","shasum":"6285f5a07a0ed7d85e9218a3e2e94ef60becc899","tarball":"https://registry.npmjs.org/@dmitrychebayewski/material-ui-4-color/-/material-ui-4-color-1.2.5.tgz","fileCount":8,"unpackedSize":266501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBnZgCRA9TVsSAnZWagAAPrgQAJRMg/p0HPfsnb3PmaJ4\n/sJH7KZLelHCBIk0TMflpYVGQ9EmmvElb681YWey3U0ULJAWMusFn5HFiHg3\niECbWkXGapQqT5u/3TszeSL9yegd+zmrXkfhx8iPDPgmodoHH2M8zWW2t4xh\nj3qkRmj46OV6SM3nf8eeAv0lVpyA767n68/3d9CLV+DIuvgi72rFz0+8fBSj\npsGJtIAhCySGvOk2+xNs5KeG30VfFXW+pMCo34Kf/J8xh+lriD2nyp3sMEgi\n0WH/CEwfDvmUg5ds1tyeZpLIYTtq7YCDz/g0uTkDD9U/z6e2DGSZxJIDw8ya\nsO2sl3WQAtt45XAMxZ/6BupZZa8fkB5NTAfVi9mCeqKKEO6s2ylbDEeo/dB0\naM7bLWRxU/PU0oCJq92icUebISVA8YipmM/zERJiYCr33JRjNVFQPc5LRURs\nR0gyuJH+ApKnBBbbvlnqbH2YF1k47u8VZV055dRjsUyQeCUNTF7BfxHRrTo5\n/Q255ddq7aLpA+6C29kBChhe68UhQTxSCntux2KOLRkKXdthfw4dRe4oW8iL\nPm+3O6xAlo2GAQVSSkRJz78nl7VnZW0TiEK3LNiP7twnvAYqPAxe88niKTh8\ngASjjL/X/fGN7xkPx75P8rSn3vya/UJ2w/TIkOcFafpgEs2WEdnwmp4S3g03\nnrq8\r\n=bCnq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7/DQ3R3Ta56LmFZWKRHdPDJa0GRQR2SuVYAr3K8LtBgIhAPKK3IpZSCamgmZywD0zOl4D+8KN96yFPhDpSRq1+NNJ"}]},"_npmUser":{"name":"dmitrychebayewski","email":"vrij-nederland@yandex.com"},"directories":{},"maintainers":[{"name":"dmitrychebayewski","email":"vrij-nederland@yandex.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/material-ui-4-color_1.2.5_1644590688367_0.03573421314274561"},"_hasShrinkwrap":false}},"time":{"created":"2022-02-11T14:44:48.300Z","1.2.5":"2022-02-11T14:44:48.603Z","modified":"2022-04-05T04:58:46.995Z"},"maintainers":[{"name":"dmitrychebayewski","email":"vrij-nederland@yandex.com"}],"description":"The lightest colorpicker for React Material-Ui. No dependencies. It uses Hooks and support Typescript, and more !","homepage":"https://mikbry.github.io/material-ui-color/","keywords":["react","color picker","react-component","colorpicker","picker","tiny","color","material-ui","material design","react-color","typescript"],"repository":{"type":"git","url":"git+https://github.com/dmitrychebayewski/material-ui-color.git#props_to_text_field"},"author":{"name":"Mik","email":"mik@miklabs.com"},"bugs":{"url":"https://github.com/dmitrychebayewski/material-ui-color/issues"},"license":"MIT","readme":"# `material-ui-color` picker and other components\r\n\r\n[![Build Status][action-image]][action-url]\r\n[![codecov][codecov-image]][codecov-url]\r\n[![NPM version][npm-image]][npm-url]\r\n[![License][license-image]][license-url]\r\n[![minisize][min-image]][min-url]\r\n[![dependency status][deps-svg]][deps-url]\r\n[![dev dependency status][dev-deps-svg]][dev-deps-url]\r\n[![peer dependency status][peer-deps-svg]][peer-deps-url]\r\n[![Downloads][downloads-image]][downloads-url]\r\n\r\n[action-image]: https://github.com/mikbry/material-ui-color/workflows/Build%20and%20Deploy/badge.svg\r\n[action-url]: https://mikbry.github.io/material-ui-color/\r\n[codecov-image]: https://codecov.io/gh/mikbry/material-ui-color/branch/master/graph/badge.svg?token=K4P0vnM5fh\r\n[codecov-url]: https://codecov.io/gh/mikbry/material-ui-color\r\n[npm-image]: https://img.shields.io/npm/v/material-ui-color.svg\r\n[npm-url]: https://www.npmjs.com/package/@dmitrychebayewski/material-ui-4-color\r\n[license-image]: https://img.shields.io/github/license/mikbry/material-ui-color\r\n[License-url]:https://github.com/mikbry/material-ui-color/blob/master/LICENSE\r\n[min-image]:https://badgen.net/bundlephobia/min/material-ui-color\r\n[min-url]:https://bundlephobia.com/result?p=@dmitrychebayewski/material-ui-4-color\r\n[deps-svg]: https://david-dm.org/mikbry/material-ui-color.svg\r\n[deps-url]: https://david-dm.org/mikbry/material-ui-color\r\n[dev-deps-svg]: https://david-dm.org/mikbry/material-ui-color/dev-status.svg\r\n[dev-deps-url]: https://david-dm.org/mikbry/material-ui-color#info=devDependencies\r\n[peer-deps-svg]: https://david-dm.org/mikbry/material-ui-color/peer-status.svg\r\n[peer-deps-url]: https://david-dm.org/mikbry/material-ui-color#info=peerDependencies\r\n[downloads-image]: http://img.shields.io/npm/dm/material-ui-color.svg\r\n[downloads-url]: http://npm-stat.com/charts.html?package=@dmitrychebayewski/material-ui-4-color\r\n\r\n> Collections of color components for [material-ui](https://github.com/mui-org/material-ui). No dependencies, small, highly customizable and theming support !\r\n\r\n![Video of ColorPicker](./images/muicc-v0-3.webp)\r\n\r\n## Contents\r\n- [Why rework Mikbry's project?](#Why-rework-Mikbry's-project?)\r\n- [Why another ColorPicker?](#Why-another-ColorPicker-?)\r\n- [Documentation](#documentation)\r\n- [Requirements](#requirements)\r\n- [Install](#install)\r\n- [Usage](#usage)\r\n- [Roadmap](#roadmap)\r\n- [Contribute](#contribute)\r\n- [License](#license)\r\n\r\n## Why rework Mikbry's project?\r\n- Plans are submitting PR into his mui-color project, but I need enhanced Color Picker MUI 4 for a limited time;\r\n- Allows passing useful properties to material-ui TextField underlying component;\r\n- Stable version 1.2.0 codebase, Material UI V.4;\r\n- ColorPicker adornment: Button, embedded in the underlying TextField (similarly to material-ui-pickers experience). \r\n\r\n## Why another ColorPicker ?\r\n\r\n- Fully compatible with Material-UI : theming and low level components\r\n- Highly customizable ColorPicker : gradient picker, palette, input format, deferred mode\r\n-  Small in size (<30kb) without any direct dependencies\r\n- Use modern React hook and coding conventions\r\n- Documentation made with Storybook, using Component Story Format and MDX\r\n\r\n## Documentation\r\n\r\nFull documentation is available here :\r\n\r\nhttps://mikbry.github.io/material-ui-color/\r\n\r\n### Examples \r\n\r\n> You can find examples [here](EXAMPLES.md) and [here](/examples).\r\n\r\nAlso in codesanbox\r\n\r\n- Javascript : https://codesandbox.io/s/material-ui-color-qb4vm?file=/src/App.jsx\r\n\r\n- Typescript : https://codesandbox.io/s/material-ui-color-picker-qvcg3?file=/src/App.tsx\r\n\r\n\r\n## Requirements\r\n- Works on modern browsers supporting ES6+ (Not compatible with IE)\r\n- React and Material-UI frameworks\r\n\r\n## Install\r\n\r\n```bash\r\nyarn add @dmitrychebayewski/material-ui-4-color\r\n```\r\n\r\nOr using npm\r\n```bash\r\nnpm install @dmitrychebayewski/material-ui-4-color\r\n```\r\n\r\n## Usage\r\n\r\nyou need to have in your dependencies:\r\n\r\n```\r\n    \"@material-ui/core\": \"^4.11.2\",\r\n    \"material-ui-popup-state\": \"^1.7.1\",\r\n    \"prop-types\": \"^15.7.2\",\r\n    \"react\": \"^17.0.1\",\r\n    \"react-dom\": \"^17.0.1\",\r\n```\r\n\r\n`material-ui-color` bring 5 components.\r\n\r\n### `<ColorPicker/>`\r\n\r\nA popover component to display a color tool box. It uses `ColorBox` and `material-ui-popup-state`.\r\n\r\n```javascript\r\nimport { ColorPicker } from 'material-ui-color';\r\n\r\nexport const Container = () => (\r\n  <div>\r\n    <ColorPicker defaultValue=\"transparent\"/>\r\n  </div>\r\n);\r\n```\r\n\r\n[ColorPicker documentation](https://mikbry.github.io/material-ui-color/?path=/story/components-colorpicker--basic)\r\n\r\n### `<ColorBox />`\r\n\r\nA component to display a color tool box\r\n```javascript\r\nimport { ColorBox } from 'material-ui-color';\r\n\r\nexport const Container = () => (\r\n  <div>\r\n    <ColorBox defaultValue=\"transparent\"/>\r\n  </div>\r\n);\r\n```\r\n\r\n[ColorBox documentation](https://mikbry.github.io/material-ui-color/?path=/story/components-colorbox--basic)\r\n\r\n### `<ColorInput />`\r\n\r\nAn input component to display/edit color values in different format (plain, hex, rgb, hsl, hsv).\r\n\r\n```javascript\r\nimport { ColorInput } from 'material-ui-color';\r\n\r\nexport const Container = () => (\r\n  <div>\r\n    <ColorInput defaultValue=\"red\"/>\r\n  </div>\r\n);\r\n```\r\n\r\n[ColorInput documentation](https://mikbry.github.io/material-ui-color/?path=/story/components-colorinput--basic)\r\n\r\n### `<ColorPalette />`\r\n\r\nA component to display a grid of color buckets.\r\n\r\n```javascript\r\nimport { ColorPalette } from '@dmitrychebayewski/material-ui-4-color';\r\n\r\nconst palette = {\r\n  red: '#ff0000',\r\n  blue: '#0000ff',\r\n  green: '#00ff00',\r\n  yellow: 'yellow',\r\n  cyan: 'cyan',\r\n  lime: 'lime',\r\n  gray: 'gray',\r\n  orange: 'orange',\r\n  purple: 'purple',\r\n  black: 'black',\r\n  white: 'white',\r\n  pink: 'pink',\r\n  darkblue: 'darkblue',\r\n};\r\n\r\nexport const Container = () => (\r\n  <div>\r\n    <ColorPalette palette={palette} />\r\n  </div>\r\n);\r\n```\r\n\r\n[ColorPalette documentation](https://mikbry.github.io/material-ui-color/?path=/story/components-colorpalette--basic)\r\n\r\n### `<ColorButton />`\r\n\r\nDisplays a button filled with a color\r\n\r\n```javascript\r\nimport { ColorButton } from 'material-ui-color';\r\n\r\nexport const Container = () => (\r\n  <div>\r\n    <ColorButton color=\"red\"/>\r\n  </div>\r\n);\r\n```\r\n\r\n[ColorButton documentation](https://mikbry.github.io/material-ui-color/?path=/story/components-colorbutton--basic)\r\n\r\n## Roadmap\r\n\r\n### v1.2.5 - [Current version](https://github.com/dmitrychebayewski/material-ui-color/tree/props_to_text_field)\r\n- More Picker Button adornments\r\n- Submit a PR to Mikbry's mui-color \r\n- Make @dmitrychebayewski/material-ui-4-color deprecated \r\n\r\n## Contribute\r\n\r\nContributions welcome! Read the [contribution guidelines](CONTRIBUTING.md) first.\r\n\r\n\r\n## License\r\n\r\nReleased under MIT License\r\n","readmeFilename":"README.md"}