{"id":40914515,"url":"https://github.com/josealejandro2928/react-image-picker-editor","last_synced_at":"2026-01-22T03:13:04.014Z","repository":{"id":57676200,"uuid":"476335178","full_name":"josealejandro2928/react-image-picker-editor","owner":"josealejandro2928","description":"React library for the selection, edition and compression of images in png, jpeg and webp formats This package is made completely with html and css without any extra components or npm packages. It's based in functional components based in hooks, for optimization were used memo, useMemo and useCalback for avoiding any extra-renders.","archived":false,"fork":false,"pushed_at":"2025-05-16T16:13:15.000Z","size":8440,"stargazers_count":37,"open_issues_count":4,"forks_count":23,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-31T02:44:52.319Z","etag":null,"topics":["compress","image-editing-app","images","react","react-components","reactnpm"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-image-picker-editor","language":"TypeScript","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/josealejandro2928.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2022-03-31T14:11:29.000Z","updated_at":"2025-08-04T06:21:20.000Z","dependencies_parsed_at":"2024-05-16T09:30:26.792Z","dependency_job_id":"c118c9f7-791f-4637-a39c-066917d33635","html_url":"https://github.com/josealejandro2928/react-image-picker-editor","commit_stats":{"total_commits":22,"total_committers":1,"mean_commits":22.0,"dds":0.0,"last_synced_commit":"7baeb6cf392822087b6f37c2e6e34dfebb89abbc"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/josealejandro2928/react-image-picker-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josealejandro2928%2Freact-image-picker-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josealejandro2928%2Freact-image-picker-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josealejandro2928%2Freact-image-picker-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josealejandro2928%2Freact-image-picker-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/josealejandro2928","download_url":"https://codeload.github.com/josealejandro2928/react-image-picker-editor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josealejandro2928%2Freact-image-picker-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28651924,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T01:17:37.254Z","status":"online","status_checked_at":"2026-01-22T02:00:07.137Z","response_time":144,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["compress","image-editing-app","images","react","react-components","reactnpm"],"created_at":"2026-01-22T03:13:03.954Z","updated_at":"2026-01-22T03:13:04.008Z","avatar_url":"https://github.com/josealejandro2928.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReactImagePickerEditor\n\nReact library for the selection, edition and compression of images in png, jpeg and webp formats\nThis package is made completely with html and css without any extra components or npm packages.\nIt's based in functional components based in hooks, for optimization were used memo, useMemo and useCalback for avoiding any extra-renders.\n\n🚀🚀🚀🚀🚀 Ready to React 18 🚀🚀🚀🚀🚀🚀\n\n### Description\n\nIn many projects it is of interest to upload images for a backend, and sometimes we have to consult other programs for the compression of images and the change of format to improve the performance of the page. With `ReactImagePickerEditor` this is possible in real time with for each image that you want to upload.\n\n### Installation\n\n```sh\nnpm i react-image-picker-editor --save\n```\n\nor yarn\n\n```sh\nyarn add react-image-picker-editor\n```\n\n### Usages\n\nYou must import the following where you will use it:\n\n```tsx\n...\nimport ReactImagePickerEditor, { ImagePickerConf } from 'react-image-picker-editor';\nimport 'react-image-picker-editor/dist/index.css'\n...\n  const config2: ImagePickerConf = {\n    borderRadius: '8px',\n    language: 'en',\n    width: '330px',\n    height: '250px',\n    objectFit: 'contain',\n    compressInitial: null,\n    darkMode: false,\n    rtl: false\n  };\n  // const initialImage: string = '/assets/images/8ptAya.webp';\n  const initialImage = '';\n\n return \u003cdiv\u003e\n       ...\n        \u003c ReactImagePickerEditor\n            config={config2}\n            imageSrcProp={initialImage}\n            imageChanged={(newDataUri: any) =\u003e { setImageSrc(newDataUri) }} /\u003e\n        \u003c/div\u003e\n      ...\n```\n\n### Here is an example with different configurations\n\n```tsx\n\u003ch2\u003eBasic ussage\u003c/h2\u003e\n  \u003cReactImagePickerEditor config={config2}/\u003e\n\u003cbr /\u003e\n\u003ch2\u003eInitial Image , a callback to get the updates of the dataUri image \u003c/h2\u003e\n\u003cReactImagePickerEditor\n      config={config2}\n      imageSrcProp={initialImage}\n      imageChanged={(newDataUri: any) =\u003e { setImageSrc(newDataUri) }} /\u003e\n```\n\n\u003c!-- ![Image 1](https://ngp-image-picker.surge.sh/assets/images/1.png) --\u003e\n\n![1](https://user-images.githubusercontent.com/37028825/165946155-66c83156-418b-4d41-b681-48e5b141f818.png)\n\n### More about the component\n\nThe `ReactImagePickerEditor` component has a setting to change the width, length, the aspectRatio, and objectFit properti of the loaded image. In addition to the language ( en | es | fr | de | fa ). It also has an initial compression ratio option that by default is null.\nIt is important to note that the quality factor for image compression is only for formats such as: jpeg and webp.\nThe interface looks like this:\n\n```typescript\nexport interface ImagePickerConf {\n  width?: string;\n  height?: string;\n  borderRadius?: string;\n  aspectRatio?: number | null;\n  objectFit?: \"cover\" | \"contain\" | \"fill\" | \"revert\" | \"scale-down\";\n  compressInitial?: number; // Range from [1-100]\n  language?: string;\n  hideDeleteBtn?: boolean;\n  hideDownloadBtn?: boolean;\n  hideEditBtn?: boolean;\n  hideAddBtn?: boolean;\n}\n```\n\n| name            |  type   | description                                                                                                                                          | default |\n| --------------- | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------- | ------: |\n| width           | string  | Set the specific width of the div that contain the image uploaded                                                                                    |    null |\n| height          | string  | Set the specific height of the div that contain the image uploaded                                                                                   |    null |\n| borderRadius    | string  | Set the property for the holder of the image and the image                                                                                           |    null |\n| aspectRatio     | string  | This apply a specifict aspect ratio to the div, use this with only setting a width and you can archive the ratio that you want it                    |    null |\n| objectFit       | string  | Default is 'cover', but if 'contain' is used the content will be scaled to maintain its aspect ratio while fitting inside the element's content box. | 'cover' |\n| compressInitial | number  | Quality factor applied to images with format: \"webp, jpeg\"                                                                                           |    null |\n| language        | string  | set the translations object                                                                                                                          |    'en' |\n| hideDeleteBtn   | boolean | hide the botton                                                                                                                                      |   false |\n| hideDownloadBtn | boolean | hide the botton                                                                                                                                      |   false |\n| hideEditBtn     | boolean | hide the botton                                                                                                                                      |   false |\n| hideAddBtn      | boolean | hide the botton                                                                                                                                      |   false |\n| darkMode        | boolean | control dark mode                                                                                                                                    |   false |\n| rtl             | boolean | enable rtl adjustment                                                                                                                                |   false |\n\nA basic configuration object with compression applied would be:\n\n```typescript\n  ...\n  config1: ImagePickerConf = {\n    language: 'en',\n    compressInitial: 90\n  };\n  ...\n```\n\nThe above example means that once an image is loaded from the file system, a compression quality is applied to it with a value of 0.9, and the resulting image will be reformatted as a jpeg.\n\n### Editing panel\n\nOnce you have selected an image, 4 buttons are enabled below the image:\n\n1. load a new image.\n2. Open the editing panel.\n3. Download the image.\n4. Delete the image.\n\nIn the edit panel, you can change the quality ratio to compress the file size (in kb). Also changing width and height in px keeping aspect ratio or not, is selectable. You can change the image format as you wish, the options are 'png', 'webp','jpeg'.\nThe 'Png' format is not affected by changing the quality ratio.\nAnother capability is that you can crop the image by simply dragging and dropping the cropping component. And by clicking on the crop button.\n\n**I just added a new tab for applying filters**. Now you can not only crop, compress and reformat your image, but you have new features like:\n\n1. Contrast level\n2. Brigthness level\n3. Gray\n4. Sepia\n5. Saturation\n6. Blur\n\n🔥🔥🔥🔥🔥 You can have in your website a component like the instagram or linkedin for editing your images. 🔥🔥🔥🔥🔥\n\n\u003c!-- ![Image 1](https://ngp-image-picker.surge.sh/assets/images/tab-section.png) --\u003e\n\n![tab-section](https://user-images.githubusercontent.com/37028825/165946293-5cf3635d-51a6-44cd-bf85-2539377a37db.png)\n\n\u003c!-- ![Image 2](https://ngp-image-picker.surge.sh/assets/images/2.png) --\u003e\n\n![2](https://user-images.githubusercontent.com/37028825/165946318-10abdfe4-254f-4f7c-8df1-64ece3f15308.png)\n\n### Control section\n\n\u003c!-- ![Image 3](https://ngp-image-picker.surge.sh/assets/images/n-1.png) --\u003e\n\n![n-1](https://user-images.githubusercontent.com/37028825/165946368-efca01c1-07b5-4e12-ae65-7218dc5a4021.png)\n\n\u003c!-- ![Image 3](https://ngp-image-picker.surge.sh/assets/images/n-2.png) --\u003e\n\n![n-2](https://user-images.githubusercontent.com/37028825/165946403-8b31065a-8369-4211-9774-92bbe075d608.png)\n\n\u003c!-- ![Image 3](https://ngp-image-picker.surge.sh/assets/images/n-3.png) --\u003e\n\n![n-3](https://user-images.githubusercontent.com/37028825/165946448-6bc0922a-a4e1-4691-953e-8058deef338b.png)\n\n\u003c!-- ![Image 3](https://ngp-image-picker.surge.sh/assets/images/n-4.png) --\u003e\n\n![n-4](https://user-images.githubusercontent.com/37028825/165946487-5cb954db-92e3-4ce2-8432-add386f8ec22.png)\n\n### Cropping images\n\n\u003c!-- ![Image 4](https://ngp-image-picker.surge.sh/assets/images/5.png) --\u003e\n\n![5](https://user-images.githubusercontent.com/37028825/165946595-d5f04d40-bd38-45fa-aeb1-c607dc524fdc.png)\n\n### Example demo\n\n[https://react-image-picker-editor.surge.sh/](https://react-image-picker-editor.surge.sh/)\n\n### Stackblitz example\n\n#### [https://stackblitz.com/edit/react-image-picker-editor-example-usage?file=App.tsx](https://stackblitz.com/edit/react-image-picker-editor-example-usage?file=App.tsx)\n\n### Angular version\n\n#### [ngp-image-picker](https://www.npmjs.com/package/ngp-image-picker)\n\n##### More useful Npm packages\n\n#### 1. [ngp-lazy-load](https://www.npmjs.com/package/ngp-lazy-load)\n\n#### 2. [ngp-material-rating](https://www.npmjs.com/package/ngp-material-rating)\n\n#### 3. [react-hook-modal](https://www.npmjs.com/package/react-hook-modal)\n\n#### 4. [react-basic-stepper](https://www.npmjs.com/package/react-basic-stepper)\n\n#### 5. [tabs-react-component](https://www.npmjs.com/package/tabs-react-component)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosealejandro2928%2Freact-image-picker-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosealejandro2928%2Freact-image-picker-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosealejandro2928%2Freact-image-picker-editor/lists"}