{"id":25436955,"url":"https://github.com/mdjfs/react-profile","last_synced_at":"2025-07-06T12:33:45.306Z","repository":{"id":194106538,"uuid":"685654493","full_name":"mdjfs/react-profile","owner":"mdjfs","description":"React Profile Editor, crop, upload, apply filters and adjust colors for your avatar image. Optimize the image size for your application","archived":false,"fork":false,"pushed_at":"2024-02-16T15:07:21.000Z","size":457,"stargazers_count":10,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-04T04:06:17.044Z","etag":null,"topics":["avatar","brightness","contrast","crop","editor","image","image-crop","image-filters","image-optimization","library","npm","photo","profile","react","react-avatar-editor","react-image-crop","react-image-editor","react-photo-editor","react-profile-editor","saturation"],"latest_commit_sha":null,"homepage":"https://react-image-editor.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdjfs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-08-31T17:52:46.000Z","updated_at":"2024-11-27T14:45:24.000Z","dependencies_parsed_at":"2023-12-19T09:13:07.101Z","dependency_job_id":"9876118e-06b2-4d80-81c4-d654b26dbd80","html_url":"https://github.com/mdjfs/react-profile","commit_stats":{"total_commits":24,"total_committers":1,"mean_commits":24.0,"dds":0.0,"last_synced_commit":"e33f436bd8d5100c608ecbe78324235d3c70e152"},"previous_names":["mdjfs/react-profile"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdjfs%2Freact-profile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdjfs%2Freact-profile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdjfs%2Freact-profile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdjfs%2Freact-profile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdjfs","download_url":"https://codeload.github.com/mdjfs/react-profile/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239259343,"owners_count":19609055,"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":["avatar","brightness","contrast","crop","editor","image","image-crop","image-filters","image-optimization","library","npm","photo","profile","react","react-avatar-editor","react-image-crop","react-image-editor","react-photo-editor","react-profile-editor","saturation"],"created_at":"2025-02-17T08:31:27.204Z","updated_at":"2025-02-17T08:31:51.473Z","avatar_url":"https://github.com/mdjfs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![React Profile Icon](https://imgur.com/jqkjGad.png)\n\n# React Profile\n\n[![npm version](https://badge.fury.io/js/react-profile.svg)](https://www.npmjs.com/package/react-profile)\n\nA simple and open-source React component for editing photos.\n\n[Demo](https://react-profile-page-coral.vercel.app/demo)\n\n[Homepage](https://react-profile-page-coral.vercel.app/)\n\n## Table of Contents\n\n1. [Installation](#installation)\n2. [Example](#example)\n3. [Options](#options)\n4. [Props](#props)\n5. [Contributing / Developing](#contributing--developing)\n\n## Installation\n\nIn your terminal, execute this command depending on your preferred package manager:\n\n```\nnpm i react-profile\nyarn add react-profile\npnpm add react-profile\n```\n\n## Example\n\nOne way to open the editor is passing the image path and rendering it. For example:\n\n```javascript\nimport React from \"react\";\nimport ReactProfile from \"react-profile\";\nimport \"react-profile/themes/default.min.css\";\n\nfunction App() {\n  return \u003cReactProfile src=\"./your-image.png\" /\u003e;\n}\n\nexport default App;\n```\n\nAdditionally, you can open the editor directly in your code. For example:\n\n```javascript\nimport { openEditor } from \"react-profile\";\nimport \"react-profile/themes/dark.min.css\";\n\nasync function open() {\n  const result = await openEditor({ src: \"./your-image.jpg\" });\n}\n```\n\nVery important: Always import the corresponding style file for the desired theme when rendering/calling the editor.\n\n\n## Options\n\nYou can change the editor's language with the 'language' property. For example:\n\n```javascript\nimport React from \"react\";\nimport ReactProfile from \"react-profile\";\nimport \"react-profile/themes/default.min.css\";\n\nfunction App() {\n  return \u003cReactProfile src=\"./your-image.png\" language=\"zh\" /\u003e;\n}\n\nexport default App;\n```\n\nYou can request an image in square format. For example:\n\n```javascript\nimport React from \"react\";\nimport ReactProfile from \"react-profile\";\nimport \"react-profile/themes/default.min.css\";\n\nfunction App() {\n  return \u003cReactProfile src=\"./your-image.png\" square /\u003e;\n}\n\nexport default App;\n```\n\nYou can enable only the modules you want using the 'modules' property. For example:\n\n```javascript\nimport React from \"react\";\nimport ReactProfile from \"react-profile\";\nimport \"react-profile/themes/default.min.css\";\n\nfunction App() {\n  return \u003cReactProfile src=\"./your-image.png\" modules={[\"filter\", \"crop\"]} /\u003e;\n}\n\nexport default App;\n```\n\nYou can add more filters or even all available filters. For example:\n\n```javascript\nimport React from \"react\";\nimport ReactProfile, { ALL_FILTERS } from \"react-profile\";\nimport \"react-profile/themes/default.min.css\";\n\nfunction App() {\n  return \u003cReactProfile src=\"./your-image.png\" filters={ALL_FILTERS} /\u003e;\n}\n\nexport default App;\n```\n\nWarning: Adding many filters could potentially slow down the editor depending on the image's size\n\nTo explore all the filters, you can visit the [Pixels.js](https://silvia-odwyer.github.io/pixels.js/) website\n\nYou can initialize the component with an HTMLImageElement object specifying the type. For Example:\n\n```javascript\nimport React from \"react\";\nimport ReactProfile from \"react-profile\";\nimport \"react-profile/themes/default.min.css\";\n\nfunction App() {\n  return \u003cReactProfile src={YOUR_IMG_OBJECT as HTMLImageElement} type=\"image/jpeg\" /\u003e;\n}\n\nexport default App;\n```\n\nYou can change some options to crop the image. The ['react-image-crop'](https://github.com/DominicTobias/react-image-crop) library specifies all the options. For Example:\n\n```javascript\nimport React from \"react\";\nimport ReactProfile from \"react-profile\";\nimport \"react-profile/themes/default.min.css\";\n\nfunction App() {\n  return \u003cReactProfile src=\"./your-image.png\" cropOptions={{ maxWidth: 500, maxHeight: 300 }} /\u003e;\n}\n\nexport default App;\n```\n\nYou can change how the crop object is initialized in the editor. The ['react-image-crop'](https://github.com/DominicTobias/react-image-crop) library specifies all the options. For Example:\n\n```javascript\nimport React from \"react\";\nimport ReactProfile from \"react-profile\";\nimport \"react-profile/themes/default.min.css\";\n\nfunction App() {\n  return (\n    \u003cReactProfile\n      src=\"./your-image.png\"\n      initCrop={{\n        unit: \"%\",\n        width: 50,\n        height: 50,\n        x: 25,\n        y: 25,\n      }}\n    /\u003e\n  );\n}\n\nexport default App;\n```\n\n## Props\n\n**`src?: string | File | HTMLImageObject`**\n\nSource of the image\n\n**`initCrop?: Crop`**\n\nreact-image-crop init crop\n\n**`cropOptions?: CropOptions`**\n\nreact-image-crop crop options\n\n**`square?: boolean`**\n\nSquare Image\n\n**`onCancel?: () =\u003e void`**\n\nHandler when the user cancels edit\n\n**`onDone?: (exportObject?: EXPORT_OBJECT) =\u003e void`**\n\nHandler when the user finishes editing. The EXPORT_OBJECT has the following methods:\n\n- getCanvas() -\u003e get canvas object\n- getBlob() (async) -\u003e get blob\n- getDataURL() -\u003e get data url\n- getImageFromBlob() (async) -\u003e get HTMLImageElement from blob\n- getImageFromDataURL() (async) -\u003e get HTMLImageElement from blob\n\n**`maxWidth?: number`**\n\nIt refers to the maximum resolution (in width) of the image. Note: This is different from the size rendered on the screen. It is done for image optimization. The default maximum is '1000'. Try not to use very high resolutions to avoid slowdowns.\n\n**`maxHeight?: number`**\n\nIt refers to the maximum resolution (in height) of the image. Note: This is different from the size rendered on the screen. It is done for image optimization. The default maximum is '1000'. Try not to use very high resolutions to avoid slowdowns.\n\n**`quality?: number`**\n\nImage quality for optimization purposes. Default is '0.8'. Only affects JPEG format images. Range of values 0-1\n\n**`maxImageSize?: number`**\n\nMaximum image size in bytes. The default maximum size is '10MB' (1024 \\* 1024 \\* 10). If you want to work with larger images, you should specify it here. Note: Working with very large images can overload the canvas object and may cause the editor to fail.\n\n**`modules?: MODULES[]`**\n\nAn array that specifies which modules the developer wants to be rendered in the editor.\n\n**`type?: 'image/jpeg|image/png'`**\n\nThis property declares the type of the image for the editor\n\n## Contributing / Developing\n\nIn your project, navigate to the 'node_modules' folder and look for the 'react-profile' package\n\nClone the repository\n\n`git clone https://github.com/mdjfs/react-profile`\n\nInstall and build\n\n`yarn \u0026\u0026 yarn run build`\n\nNow. inside src/ you can _change everything about logics, languages, icons, etc_\n\nAnd inside themes/ you can _change all the styles, add new themes, etc_\n\nAfter each change. Remember run builds again.\n\nWhen you're ready, open a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdjfs%2Freact-profile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdjfs%2Freact-profile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdjfs%2Freact-profile/lists"}