{"_id":"@caohenghu/react-colorpicker","_rev":"4-2ddaff9e362a33be97202f8a57fd9a90","name":"@caohenghu/react-colorpicker","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@caohenghu/react-colorpicker","version":"1.0.0","description":"Colorpicker of React Components","main":"src/main.js","scripts":{"hot":"webpack-dev-server --env.config local --env.local","pro":"webpack --env.config pro --env.pro","gh":"node build/gh.js"},"keywords":["color","colorpicker","react"],"repository":{"type":"git","url":"git+https://github.com/caohenghu/react-colorpicker.git"},"author":{"name":"caohenghu","email":"caohenghu@gmail.com"},"license":"MIT","devDependencies":{"@babel/core":"^7.5.5","@babel/preset-env":"^7.5.5","@babel/preset-react":"^7.0.0","autoprefixer":"^9.6.1","babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^3.0.0","css-loader":"^3.2.0","eslint":"^6.2.1","eslint-plugin-react":"^7.14.3","file-loader":"^4.2.0","gh-pages":"^2.1.1","html-webpack-plugin":"^3.2.0","node-sass":"^4.12.0","postcss-loader":"^3.0.0","sass-loader":"^7.2.0","style-loader":"^1.0.0","url-loader":"^2.1.0","webpack":"^4.39.2","webpack-cli":"^3.3.7","webpack-dev-server":"^3.8.0"},"gitHead":"e26dad09265cd282378049a3bcc98a5ede1cf831","bugs":{"url":"https://github.com/caohenghu/react-colorpicker/issues"},"homepage":"https://github.com/caohenghu/react-colorpicker#readme","_id":"@caohenghu/react-colorpicker@1.0.0","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-TUu3/EnIVw2t5rJyKhRgYb05LPNoVzTGBBB7nawgjwRi1Vq6FE+u+t7KglMClOSkCvqSZvTu8AdWxXavNTPHHA==","shasum":"60f162f2229cc54cfe6fde32a6296dcdd626456f","tarball":"https://registry.npmjs.org/@caohenghu/react-colorpicker/-/react-colorpicker-1.0.0.tgz","fileCount":36,"unpackedSize":166352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdYP92CRA9TVsSAnZWagAADC4QAILQxi9mob8MXH2z89Zi\naVcUKm6ISMoipUrkM6nvPGp3oium1PRlaZ8mg5MKnbSxPSYkCFHKnr9THYK0\nhUSKq6f2yhG0lu0A+H5qspy/p3iVLqvvgeNrtF1voy3d0309ToIi6OCeNjlg\nD1zb0ppopxtdkZ8Q5S7uJpC5U9O7am9Qtlhjz6XmqycuUdf9msBuTSti1gUK\nsBgm245wepT766rDG+xLuGIqGOtiSzYkivm8FFjepFP4qe6pjNqUHesA3L3E\nyPyE6V+BJzdwPJR0BfSq/79xDjftn+NPYpD0IwQYxM7fBY2Jqc0vmWpQQttM\n8RjesBYOWr/5XL7A/Xo0jliqElZEOKBdhqk5uwJBQPqZcLjBj2rWqkqAQ4Gj\nKASjsMiHHswhXaN6wHHQgB2OcGgGa3M1A0lVuJL0OcPphK42EliF8npgDRpg\nLHOmd3ICD33zX5UPfgfQKSPZN/rFbv8BQabJKc7SO5SpeBuPMGIjbSjh1s40\n6gsXtX24Xw9D/9WHhpAbLSHyKMsCrinZOpQAAzs5WGB6cK4wy49ATUmxDMoz\nWHwbY8nzhGqBgnub9/asf6YZpeTJYUrJq0QihcT5LfKJCNOlmmJyBqFBt7FY\nQKbVZiEr0nK/X8QIHbshn7qZT6kQItCmXiEpw3qR+5ePmZ9VWn9iKTaNbkq4\n+g3i\r\n=m2j/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDK3K3QsRhqyLU0DOf0R3ahCvKa7XAYIn9qttS+lpy/pgIgQ5gmePonrWdpwIY10Y3HumZiWwVFsuoQmuzJ/ecE6rc="}]},"maintainers":[{"name":"caohenghu","email":"caohenghu@gmail.com"}],"_npmUser":{"name":"caohenghu","email":"caohenghu@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-colorpicker_1.0.0_1566637941993_0.3144747620748143"},"_hasShrinkwrap":false},"1.0.1":{"name":"@caohenghu/react-colorpicker","version":"1.0.1","description":"Colorpicker of React Components","main":"src/main.js","scripts":{"hot":"webpack-dev-server --env.config local --env.local","pro":"webpack --env.config pro --env.pro","gh":"node build/gh.js"},"keywords":["react","colorpicker","color"],"repository":{"type":"git","url":"git+https://github.com/caohenghu/react-colorpicker.git"},"author":{"name":"caohenghu","email":"caohenghu@gmail.com"},"license":"MIT","devDependencies":{"@babel/core":"^7.5.5","@babel/preset-env":"^7.5.5","@babel/preset-react":"^7.0.0","autoprefixer":"^9.6.1","babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^3.0.0","css-loader":"^3.2.0","eslint":"^6.2.1","eslint-plugin-react":"^7.14.3","file-loader":"^4.2.0","gh-pages":"^2.1.1","html-webpack-plugin":"^3.2.0","node-sass":"^4.12.0","postcss-loader":"^3.0.0","sass-loader":"^7.2.0","style-loader":"^1.0.0","url-loader":"^2.1.0","webpack":"^4.39.2","webpack-cli":"^3.3.7","webpack-dev-server":"^3.8.0"},"gitHead":"492733073b3627cf2d89ecd93fe3293c97326592","bugs":{"url":"https://github.com/caohenghu/react-colorpicker/issues"},"homepage":"https://github.com/caohenghu/react-colorpicker#readme","_id":"@caohenghu/react-colorpicker@1.0.1","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-/alWKv0oxi7pCKqXVcyeQ1uIgPWQL0QXIN7jlFBYBhaXyJOlqgvSpiN7q8CsPSsNo6UUlO6J6qtlfFT5fO+Y7Q==","shasum":"091415a16b2c050ed08f99d9b295c230b3371483","tarball":"https://registry.npmjs.org/@caohenghu/react-colorpicker/-/react-colorpicker-1.0.1.tgz","fileCount":36,"unpackedSize":166352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZJglCRA9TVsSAnZWagAAlycP/0K2DYRSOwbVp5WbnQGg\nHJhFGF2Vp179k0T68Fldlj2Dm4bWtCj+lzj5ExliF+sE35CGg92D3rD0SgIw\nzhe7nSGwEFqecdMD0QkIOU14SWwq2jFxfZzdTUBkH13aaxsJuBNBryITyrwB\n560ecoxoTb7k4xPLFoP5IcYpRwBhISsBfmIhat90/E/uPxGBnZ+5yGbR1bkU\nKTALfzP2FF95RPVgqK6TkpM5zhhZBHVSx/sh522ztcGzJL64tMaSB2YqraGv\naMeKkwQytN8MJ9VnIeqQdpzvg3Nectc6XRcmS03hSMBDohE4QvIQGjhisP+o\nwkEN2NzxjTWMsT7l3lEOiIVnpPCXSgzqF+tYiULBS04LHL1ERNCCiFILWQHD\n6nnTLco8FyZB+bWeDg7lCmYvjjn16pgGwCh351qu35NZsi5jqNrOmQQwQnv/\ncyKACKTR8t3LIzwO5Hy+bPbLmBkEA0ZmzxxpxefU9at2zZbtXtPhdmpDlw5R\n6l3eY+yadXAofdYuxWM7rPlDsYMAYUqBzzprkBmE+M0bCOhVhCyiAF+ssnJg\nsQW9sxyBkuiATD0QT46tgysJy2qnvfz12LHvLLI6QeRUusUm4h2XC71AqzVR\n5g+yRJIfbTWkvuX5OknhPMAVheJhQjKuW0Cdt2luBH26HttPj613il9ObPdS\n4dDF\r\n=KGLp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHYUoYQ7x+2rlPnZZ1IOFyL2aMLebJIJMWPIxP0MaDk9AiBZZf7BG+rRlbHFWWc2MFwHghvo2O16fQjX5MgtPMwXog=="}]},"maintainers":[{"name":"caohenghu","email":"caohenghu@gmail.com"}],"_npmUser":{"name":"caohenghu","email":"caohenghu@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-colorpicker_1.0.1_1566873636692_0.9486223044063926"},"_hasShrinkwrap":false},"1.0.2":{"name":"@caohenghu/react-colorpicker","version":"1.0.2","description":"Colorpicker of React Components","main":"src/main.js","scripts":{"hot":"webpack-dev-server --env.config local --env.local","pro":"webpack --env.config pro --env.pro","gh":"node build/gh.js"},"keywords":["react","colorpicker","color"],"repository":{"type":"git","url":"git+https://github.com/caohenghu/react-colorpicker.git"},"author":{"name":"caohenghu","email":"caohenghu@gmail.com"},"license":"MIT","devDependencies":{"@babel/core":"^7.5.5","@babel/preset-env":"^7.5.5","@babel/preset-react":"^7.0.0","autoprefixer":"^9.6.1","babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^3.0.0","css-loader":"^3.2.0","eslint":"^6.2.1","eslint-plugin-react":"^7.14.3","file-loader":"^4.2.0","gh-pages":"^2.1.1","html-webpack-plugin":"^3.2.0","node-sass":"^4.12.0","postcss-loader":"^3.0.0","sass-loader":"^7.2.0","style-loader":"^1.0.0","url-loader":"^2.1.0","webpack":"^4.39.2","webpack-cli":"^3.3.7","webpack-dev-server":"^3.8.0"},"gitHead":"fd4654c10f6fc26e49cf526db0ebdd3d26743d13","bugs":{"url":"https://github.com/caohenghu/react-colorpicker/issues"},"homepage":"https://github.com/caohenghu/react-colorpicker#readme","_id":"@caohenghu/react-colorpicker@1.0.2","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-pKFQ8iUT+9fDk2vxUeeQtaujs+wqAymuJnnia5RM6Kvfa86dzEGGAMcufGBYQjcPp7FBqQqpey8HmKDcLU9kJg==","shasum":"f2e7f5f7f248dbd1d1c93a78f82728eb85537ee0","tarball":"https://registry.npmjs.org/@caohenghu/react-colorpicker/-/react-colorpicker-1.0.2.tgz","fileCount":36,"unpackedSize":167008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZ4ePCRA9TVsSAnZWagAAxc8P/RAt9nUlVA1uZ1yYs9uw\nMe+H4CEQ9Lwe41g8N7y7KE6vxv4eWx6Cprj4l+PFSzSzT5khmvNJ3d8UQAjE\nrIszn+fmVzkrMDDQj+ht7L0RmUwfp8JgYyg8Ughn5NL6ZfAr7mCsHsYo7/jH\nAmEQAu76IM2c+Zo6WKm870/r6g9fo8LbXbznSfuXuciuQz94ZDalqUZR6nAZ\nn3Q1+LeyovJMcoY4X6iFFAcUVDznJSp4mby0W+ikSPOITOM2UaF5HNRx8fjS\nWmoCWWnt9Leoapg6g6ROjfOs1gJIpQPF+ucwExuEaFb8qsn622Ahqf1YNwrQ\n5bKyQlJCGUJSljTRPoq29G3lIU8HAgOxHr7J75JHOkUZaLHJMfA7XvXLT/vc\nl+B6nS307SDlPgTnCEe29nKRdPxRD9tUSX1qotBDCrtcAu5KlcuFwMNQe5kr\nC5CqxQoH83+ZpaF2jkTnVGxoYXfTCMlw9J1igk8509OoBLTAwsozr4A1w9SD\nt97iKVX6fIo4NOne6C49pE0sRRjmhud6tnZqUWQ9uf8DGL/ADL4q10DKUH2h\nTvvwhsjuRSImyewFAdFDO7PIbjtyr4b/xTByppA86yVJGKhazPXjAK6X95tK\njY68L6J9c4zvRnCCM/OoC/8nfD4angb+ItTTTe4+JRY4Eey+5OfOSCy8c8TU\nydB5\r\n=LKnB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDAbl8R55QLIelxYSfFPiEgeb0oQXQxIzn+JePB2zZs8AiEAr8E2YP3H65tfA1Ttl4eMjPUjcsQVPQCU+SP+zV1huqc="}]},"maintainers":[{"name":"caohenghu","email":"caohenghu@gmail.com"}],"_npmUser":{"name":"caohenghu","email":"caohenghu@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-colorpicker_1.0.2_1567065998806_0.4863061633846122"},"_hasShrinkwrap":false},"1.0.3":{"name":"@caohenghu/react-colorpicker","version":"1.0.3","description":"Colorpicker of React Components","main":"src/index.js","scripts":{"hot":"webpack-dev-server --env.config local --env.local","pro":"rm -rf dist && webpack --env.config pro --env.pro","gh":"node build/gh.js"},"keywords":["react","colorpicker","color"],"repository":{"type":"git","url":"git+https://github.com/caohenghu/react-colorpicker.git"},"author":{"name":"caohenghu","email":"caohenghu@gmail.com"},"license":"MIT","devDependencies":{"@babel/core":"^7.5.5","@babel/preset-env":"^7.5.5","@babel/preset-react":"^7.0.0","autoprefixer":"^9.6.1","babel-eslint":"^10.0.2","babel-loader":"^8.0.6","css-loader":"^3.2.0","eslint":"^6.2.1","eslint-plugin-react":"^7.14.3","file-loader":"^4.2.0","gh-pages":"^2.1.1","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.12.0","optimize-css-assets-webpack-plugin":"^5.0.3","postcss-loader":"^3.0.0","sass-loader":"^7.2.0","style-loader":"^1.0.0","url-loader":"^2.1.0","webpack":"^4.41.6","webpack-cli":"^3.3.7","webpack-dev-server":"^3.8.0"},"gitHead":"55d16fd8e316bb59e8ae36dfe2a93c0f496040cb","bugs":{"url":"https://github.com/caohenghu/react-colorpicker/issues"},"homepage":"https://github.com/caohenghu/react-colorpicker#readme","_id":"@caohenghu/react-colorpicker@1.0.3","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-YNF1gRoMi8VsGCINSNSCX8WNmDqd8O3XCQVpYm8kTYiIUq2CTlQ9c3lskxLAbsgWjsanKtQdOnfM2oktwXqh2A==","shasum":"b7af767cd231755825e8b153a3d5e1e57880aea0","tarball":"https://registry.npmjs.org/@caohenghu/react-colorpicker/-/react-colorpicker-1.0.3.tgz","fileCount":22,"unpackedSize":83213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVNHvCRA9TVsSAnZWagAANZcP/0EMztiqV7npY2gKLEm0\nwN7+gXXK4neOf5x9DqygZL6kswtOQaHJU6SRWNf+P05nLe93F4+0Kyxx18kD\nb5Ku8m1l/vGVZ87Ul6dk9TG4jkf+PvmkMeeWKvpuRQ3sUE5nVlok8A6M2BTk\npGWqG4APMPaaILQhvutFGXLoSw+FifmbraHeI55o+qsHmYMG/VqjFU9tApVo\nCjP5TSY9d4BkXWTj80q6mjrBoIFLlg0bPY0coNNCRW+kf7levXsd9CZlxacC\nWHbXKtAeFXC+pS/syOF3IoYCkueqtJn8zxdcfRsENb3mtjyjKZQSsO3gQCrG\n8jIwkKzmkbW49CNbg3FSBfuNRAlfrGs8d5bywVTahSt3nrKBKLLkzJQKJMFE\nnbNakvklWoDEbGoCnRDrzmopCBN10MNwzu99/R++FMsfXBR+fyjrD5wwgeQj\nEN0HBiNPzjoDX7V4yBPgBezIqvuEFrPU9mVmjmxGezQo7eQu+yRCfuQn/pb0\n/l1PxOOj1sTf17y1o+JRV1RdJ5ljFPg1D6a3dsxs5cvg6SfRQXOjbH6pxo/E\nFvFIYXIBOBSX8DRB3glQzJNbDBGRO6xOsagybuKuGO81+d7SdwFyql3MSlDi\nDnbSZ5Fq6tD8le1eMdSSr8eVgGq5zx/nGtfcfSKK+Y6isHFeehn2YbyLU2yk\nTJUY\r\n=PUjx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB2gDvhWf2AWRm73V5kUj71i9WxuIXQc9XoSSLNAzAGGAiEAhrDCnwG3vJM+BMaPOvHPgDw1ha24AUA5rkBakRF3L94="}]},"maintainers":[{"name":"caohenghu","email":"caohenghu@gmail.com"}],"_npmUser":{"name":"caohenghu","email":"caohenghu@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-colorpicker_1.0.3_1582617071575_0.29434303180531307"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-24T09:12:21.750Z","1.0.0":"2019-08-24T09:12:22.154Z","modified":"2022-04-04T21:43:53.120Z","1.0.1":"2019-08-27T02:40:36.849Z","1.0.2":"2019-08-29T08:06:38.937Z","1.0.3":"2020-02-25T07:51:11.693Z"},"maintainers":[{"name":"caohenghu","email":"caohenghu@gmail.com"}],"description":"Colorpicker of React Components","homepage":"https://github.com/caohenghu/react-colorpicker#readme","keywords":["react","colorpicker","color"],"repository":{"type":"git","url":"git+https://github.com/caohenghu/react-colorpicker.git"},"author":{"name":"caohenghu","email":"caohenghu@gmail.com"},"bugs":{"url":"https://github.com/caohenghu/react-colorpicker/issues"},"license":"MIT","readme":"# react-colorpicker\n\n## [LiveDemo](https://caohenghu.github.io/react-colorpicker/)\n\n![preview-dark](https://raw.githubusercontent.com/caohenghu/react-colorpicker/master/src/img/preview-dark.jpg)\n![preview-light](https://raw.githubusercontent.com/caohenghu/react-colorpicker/master/src/img/preview-light.jpg)\n\n## Install\n\n```bash\n$ yarn add @caohenghu/react-colorpicker\n```\n\n## Example\n\n```javascript\nimport ColorPicker from '@caohenghu/react-colorpicker'\n\nexport default class App extends React.Component {\n constructor(props) {\n super(props)\n this.changeColor = this.changeColor.bind(this)\n this.openSucker = this.openSucker.bind(this)\n this.state = {\n color: '#59c7f9',\n suckerCanvas: null,\n suckerArea: []\n }\n }\n\n render() {\n return (\n
\n \n
\n )\n }\n\n changeColor(color) {\n const { r, g, b, a } = color.rgba\n this.setState({\n color: `rgba(${r},${g},${b},${a})`\n })\n }\n\n openSucker(isOpen) {\n if (isOpen) {\n // ... canvas be created, and get the area of canvas\n // this.setState({\n // suckerCanvas: canvas,\n // suckerArea: [x1, y1, x2, y2]\n // })\n } else {\n // this.state.suckerCanvas && this.state.suckerCanvas.remove()\n }\n }\n}\n```\n\n## Options\n\n| Name | Type | Default | Description |\n| ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |\n| theme | String | `dark` | `dark` or `light` |\n| color | String | `#000000` | `rgba` or `hex` |\n| colors-default | Array | `['#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', '#FFE623', '#6EFF2A', '#1BC7B1', '#00BEFF', '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)']` | like `['#ff00ff', '#0f0f0f', ...]` |\n| colors-history-key | String | `react-colorpicker-history` |\n| sucker-hide | Boolean | `true` | `true` or `false` |\n| sucker-canvas | HTMLCanvasElement | `null` | like `document.createElement('canvas')` |\n| sucker-area | Array | `[]` | like `[x1, y1, x2, y2]` |\n\n## Events\n\n| Name | Type | Args | Description |\n| ----------- | -------- | ------ | -------------------------------- |\n| changeColor | Function | color | `{ rgba: {}, hsv: {}, hex: '' }` |\n| openSucker | Function | isOpen | `true` or `false` |\n\n> if you want use sucker, then `openSucker`, `sucker-hide`, `sucker-canvas`, `sucker-area` is necessary. when you click sucker button, you can click it again or press key of `esc` to exit.\n","readmeFilename":"README.md"}