{"id":23536613,"url":"https://github.com/mockingbot/mb-color-picker","last_synced_at":"2025-04-23T11:56:27.713Z","repository":{"id":55387921,"uuid":"62793085","full_name":"mockingbot/mb-color-picker","owner":"mockingbot","description":"A React component that enables to pick color through HSV/HEX/RGBA.","archived":false,"fork":false,"pushed_at":"2024-04-23T01:40:18.000Z","size":2872,"stargazers_count":38,"open_issues_count":4,"forks_count":9,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-02T09:13:51.643Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mockingbot.github.io/mb-color-picker/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mockingbot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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":"2016-07-07T09:17:56.000Z","updated_at":"2024-04-13T09:19:34.000Z","dependencies_parsed_at":"2024-06-18T22:59:12.403Z","dependency_job_id":"a94d24b1-351f-43c3-9df7-487a8dd9dde0","html_url":"https://github.com/mockingbot/mb-color-picker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mockingbot%2Fmb-color-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mockingbot%2Fmb-color-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mockingbot%2Fmb-color-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mockingbot%2Fmb-color-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mockingbot","download_url":"https://codeload.github.com/mockingbot/mb-color-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250430590,"owners_count":21429323,"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":[],"created_at":"2024-12-26T02:29:43.766Z","updated_at":"2025-04-23T11:56:27.669Z","avatar_url":"https://github.com/mockingbot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mb-react-color-picker\n\n\u003e\n\n[![NPM](https://img.shields.io/npm/v/mb-react-color-picker.svg)](https://www.npmjs.com/package/mb-react-color-picker) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n#### A React component that enables to pick color through HSV/HEX/RGBA.\n\n\n## Install\n\n```bash\nnpm i mb-react-color-picker\n```\n\n## About\n```jsx\nclass ColorPicker extends React.component {\n  static propTypes = {\n    color: PropTypes.string,\n      /*\n        color for the color picker, case insensitive\n        valid pattern:\n          1) hex pattern like '#fff', '#FFFFFF'\n          2) rgba pattern like 'rgba(255, 255, 255, 1)'\n       */\n    onChange: PropTypes.func,\n      /*\n       get called when a color is picked through dragging(hsv), the color is\n        passed in as the first and only param. Useful for managing history.\n      */\n    onConfirm: PropTypes.func,\n      /*\n       get called when a color is picked. The color, formatted to rgba pattern,\n        like 'rgba(255, 255, 255, 1)', is passed in as the first and only param.\n      */\n    applyDidMountSideEffect: PropTypes.func,\n      /*\n        get called in componentDidMount life cycle of the color picker.\n      */\n    applyWillUnmountSideEffect: PropTypes.func,\n      /*\n        get called in componentWillUnmount life cycle of the color picker.\n      */\n    themeColors: PropTypes.array,\n      /*\n        list of theme colors for quick pick, valid pattern is the same as above.\n      */\n    customColors: PropTypes.array,\n      /*\n        list of custom colors for quick pick.\n      */\n    customColorsHeaderText: PropTypes.string,\n      /*\n        header text for list of custom colors, defaults to 'Custom colors'.\n      */\n    onDragStart: PropTypes.func,\n      /*\n        if a function is passed, it will get called when dragging the color\n        picker, a DOM element of the color picker will get passed as first and\n        only param. Useful for positioning if you need a non-fixed style.\n      */\n    onClose: PropTypes.func,\n      /*\n        if a function is passed, a close button will appear on top right corner\n        on the color picker. Clicking on it will let the function get called.\n      */\n    headerText: PropTypes.string,\n      /*\n        header text for color picker, defaults to 'Color Picker'.\n      */\n  }\n\n  render () {\n    ...\n  }\n}\n```\n\n\n## Usage\n\n```jsx\nimport React, { Component } from 'react'\n\nimport ColorPicker from 'mb-react-color-picker'\n\nclass Example extends Component {\n  state = {\n    color: '#996633'\n  }\n\n  handleChange = color =\u003e this.setState({ color })\n\n  render () {\n    const { color } = this.state\n    return (\n      \u003cColorPicker\n        color={color}\n        onChange={this.handleChange}\n      /\u003e\n    )\n  }\n}\n```\n\nAlso, you can wrap a custom color picker element, for example, a eyedropper color picker, into the `\u003cColorPicker\u003e` as its child, to enhance the color picker. The custom color picker will receive `hex`, `alpha`, `handleChange` as props to interchange color with the `\u003cColorPicker\u003e`. You can check the usage in `/example/src/App.js`\n\n\n## Demo\n[Pick me :hearts:](https://mockingbot.github.io/mb-color-picker/)\n\n\n## License\n\nMIT © [mockingbot](https://github.com/mockingbot)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmockingbot%2Fmb-color-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmockingbot%2Fmb-color-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmockingbot%2Fmb-color-picker/lists"}