{"id":20235705,"url":"https://github.com/thiswallz/react-custom-product","last_synced_at":"2025-04-10T18:54:59.192Z","repository":{"id":61939346,"uuid":"555996912","full_name":"thiswallz/react-custom-product","owner":"thiswallz","description":"React component providing customization for your product image.","archived":false,"fork":false,"pushed_at":"2024-09-26T13:41:41.000Z","size":8084,"stargazers_count":7,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-10T14:21:14.294Z","etag":null,"topics":["3d","custom","gallery","hotspot","image","library","product","react","showcase","switch","typescript"],"latest_commit_sha":null,"homepage":"","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/thiswallz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-22T20:39:58.000Z","updated_at":"2024-12-04T17:14:01.000Z","dependencies_parsed_at":"2023-01-21T00:45:13.298Z","dependency_job_id":null,"html_url":"https://github.com/thiswallz/react-custom-product","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiswallz%2Freact-custom-product","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiswallz%2Freact-custom-product/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiswallz%2Freact-custom-product/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiswallz%2Freact-custom-product/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thiswallz","download_url":"https://codeload.github.com/thiswallz/react-custom-product/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248275745,"owners_count":21076654,"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":["3d","custom","gallery","hotspot","image","library","product","react","showcase","switch","typescript"],"created_at":"2024-11-14T08:17:22.628Z","updated_at":"2025-04-10T18:54:59.171Z","avatar_url":"https://github.com/thiswallz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-custom-product\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-custom-product\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-custom-product.svg\" alt=\"npm version\" \u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/thiswallz/react-custom-product/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://badgen.net/github/license/thiswallz/react-custom-product\" alt=\"license\"\u003e\n  \u003c/a\u003e\n \u003ca href=\"https://badgen.net/github/checks/thiswallz/react-custom-product\"\u003e\n    \u003cimg src=\"https://badgen.net/github/checks/thiswallz/react-custom-product\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://badgen.net/bundlephobia/dependency-count/react-custom-product\"\u003e\n    \u003cimg src=\"https://badgen.net/bundlephobia/dependency-count/react-custom-product\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://badgen.net/npm/types/react-custom-product\"\u003e\n    \u003cimg src=\"https://badgen.net/npm/types/react-custom-product\"  /\u003e\n  \u003c/a\u003e\n    \u003ca href=\"https://badgen.net/bundlephobia/tree-shaking/react-custom-product\"\u003e\n    \u003cimg src=\"https://badgen.net/bundlephobia/tree-shaking/react-custom-product\"  /\u003e\n  \u003c/a\u003e\n    \u003ca href=\"https://badgen.net/bundlephobia/minzip/react-custom-product\"\u003e\n    \u003cimg src=\"https://badgen.net/bundlephobia/minzip/react-custom-product\" /\u003e\n  \u003c/a\u003e\n\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://sonarcloud.io/project/overview?id=thiswallz_react-custom-product\"\u003e\n    \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=thiswallz_react-custom-product\u0026metric=sqale_rating\"  alt=\"Maintainability\" \u003e\n  \u003c/a\u003e\n    \u003ca href=\"https://sonarcloud.io/project/overview?id=thiswallz_react-custom-product\"\u003e\n    \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=thiswallz_react-custom-product\u0026metric=security_rating\"  alt=\"Security\" \u003e\n  \u003c/a\u003e\n     \u003ca href=\"https://sonarcloud.io/project/overview?id=thiswallz_react-custom-product\"\u003e\n    \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=thiswallz_react-custom-product\u0026metric=reliability_rating\"  alt=\"reliability\" \u003e\n  \u003c/a\u003e\n       \u003ca href=\"https://sonarcloud.io/project/overview?id=thiswallz_react-custom-product\"\u003e\n    \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=thiswallz_react-custom-product\u0026metric=bugs\"  alt=\"bugs\" \u003e\n  \u003c/a\u003e\n        \u003ca href=\"https://sonarcloud.io/project/overview?id=thiswallz_react-custom-product\"\u003e\n    \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=thiswallz_react-custom-product\u0026metric=vulnerabilities\"  alt=\"vulnerabilities\" \u003e\n  \u003c/a\u003e \n  \n\u003c/p\u003e\n\n\n\nA _lightweight_ React component providing customization for your product image.\n\nDemo \n[https://react-custom-product-demo.vercel.app/](https://react-custom-product-demo.vercel.app/)\n\n\u003cimage src=\"ss1.png\" width=\"200px\" /\u003e\n\n## Features\n\n- Zero dependencies.\n- Multiple animation choices.\n- Treeshakable (if you uise 1 component, others are not included in your bundle).\n- 2.4kb gzipped (https://bundlephobia.com/package/react-custom-product)\n\n## Current components  \n\n- Custom Product Color\n- 3D ShowCase (multiple images are needed)\n- Product Switch   \n- Product Cover\n- Product Gallery \n- Hotspot\n\n## Under construction  \n\n- Hover product\n- Masked Product\n- Custom Background\n- Auto Gallery\n\n\n# DEFINITIONS\n\n## ProductCustomColor - change your products color and have a nice animation.\n\nBe sure you have exact images with just different colors. (different shapes or pxs wont work properly)\n \n``` typescript\nimport { ProductCustomColor } from 'react-custom-product'\n\nexport default function Example() {\n  return \u003cProductCustomColor \n    width=\"500px\" \n    height=\"150px\" \n    src=\"/img/model-1.png\" \n  /\u003e\n}\n\n```\n\n| Prop                   | Type      | Default | Description                            |\n| ---------------------- | --------- | ------- | -------------------------------------------- |\n| `src` |  `String` | `required` | Image (after you change the src, will trigger the effect). |\n| `css` |  `CSSProperties` | {} | pass styles to the container |\n| `width` |  `String` | 100% | Be sure you use a fixed px size for this effect |\n| `height` |  `String` | 100% | Be sure you use a fixed px size for this effect |\n| `duration` |  `String` | .6 | Milliseconds animation will last. |\n\n## ShowCase - show your product in 3d (works for web and mobile)\n\nbe sure you have more than +10 images to have a good transition, images must be the same, but takend from different angles.\n\n``` typescript\nimport { ShowCase } from 'react-custom-product'\n\nexport default function Example() {\n    const showCaseImages = [\n      '/images/1.png',\n      '/images/2.png',\n      '/images/3.png',\n      '...'\n    ]\n\n    return \u003cShowCase images={showCaseImages} /\u003e\n}\n```\n\n| Prop                   | Type      | Default | Description                            |\n| ---------------------- | --------- | ------- | -------------------------------------------- |\n| `images` |  `String[]` | `required` | Images array (will be preload) |\n| `bg` |  `String` | '' | Image for background. |\n| `width` |  `String` | 100% | width size |\n| `height` |  `String` | 100% | height size |\n| `defaultDirection` |  `Boolean` | true| In case the drag and drop direction should goes to the opposite direction. |\n| `initialImage` |  `Number` | 0 | Image you want to be show at first (array position) |\n| `css` |  `CSSProperties` | {} | styles to the container |\n| `throttle` |  `Number` | .04 | Milliseconds the mouse will be read to calculate and mvoe right/left. |\n| `pxThreshold` |  `Number` | 4 | How many pixels are needed in order to make the decision of movement. |\n\n\n## ProductSwitch - Simple - switch from different products shapes.\n\n \n``` typescript\nimport { ProductSwitch } from 'react-custom-product'\n\nexport default function Example() {\n  return \u003cProductSwitch src=\"/img/model-1.png\" /\u003e\n}\n```\n| Prop                   | Type      | Default | Description                            |\n| ---------------------- | --------- | ------- | -------------------------------------------- |\n| `src` |  `String` | `required` | Image (after you change the src, will trigger the effect). |\n| `css` |  `CSSProperties` | {} | styles to the container |\n| `width` |  `String` | 100% |  |\n| `height` |  `String` | 100% |  |\n| `duration` |  `String` | 1 | Milliseconds animation will last. |\n\n\n## ProductCover - Product color cover.\n\nColors cover can be manually manipulated with this component.\n\n``` typescript\nimport { ProductCover } from 'react-custom-product'\n\nexport default function Example() {\n  return  \u003cProductCover\n            src=\"/models/1.png\"\n            cover=\"/models/2.png\"\n            width=\"550px\"\n            height=\"400px\"\n            coverWidth={50}\n            coverHeight={50} /\u003e\n}\n```\n| Prop                   | Type      | Default | Description                            |\n| ---------------------- | --------- | ------- | -------------------------------------------- |\n| `src` |  `String` | `required` | Image. |\n| `cover` |  `String` | `required` | Image which is covering the `src`. |\n| `css` |  `CSSProperties` | {} | styles to the container |\n| `width` |  `String` | 100% |  |\n| `height` |  `String` | 100% |  |\n| `coverWidth` |  `Number` | 100 | Percentage number |\n| `coverHeight` |  `Number` | 100 | Percentage number |\n\n\n## SwitchGallery - Simple gallery.\n\nSimple gallery to show multiple product images\n\n``` typescript\nexport default function SwitchGalleryExample() {\n  const images = [\n    '/images/1.png',\n    '/images/2.png',\n    '/images/3.png',\n    '...'\n  ]\n\n  return \u003cSwitchGallery\n    images={images}\n  /\u003e\n}\n```\n| Prop                   | Type      | Default | Description                            |\n| ---------------------- | --------- | ------- | -------------------------------------------- |\n| `images` |  `String[]` | `required` | Images. |\n| `css` |  `CSSProperties` | {} | container styles |\n| `cssImage` |  `CSSProperties` | {} | current image styles |\n| `cssImageSelectorContainer` |  `CSSProperties` | {} | container preview images styles |\n| `cssImageSelector` |  `CSSProperties` | {} | preview images styles |\n\n\n\n\n## ProductHotspot - Image Hotspot.\n\nHover some hotspot of your product and show info\n\n``` typescript\n\nconst CustomMessage1 = () =\u003e \u003ca href=\"#\"\u003eSimple link\u003c/a\u003e\nconst CustomMessage2 = () =\u003e \u003cdiv\u003eCustom message/info\u003c/div\u003e\n\nexport default function ProductHotspotExample() {\n\n  const spots = [\n    {\n      x: '35%',\n      y: '70%',\n      children: CustomMessage1()\n    },\n    {\n      x: '65%',\n      y: '20%',\n      children: CustomMessage2()\n    }\n  ]\n\n  return \u003cProductHotspot \n    src={`hotspot/1.webp`} spots={spots} height=\"auto\" /\u003e\n}\n```\n| Prop                   | Type      | Default | Description                            |\n| ---------------------- | --------- | ------- | -------------------------------------------- |\n| `src` |  `String` | `required` | Image. |\n| `spots` |  `ProductHotspotPoint[]` | {} | positions and react element for each hotspot |\n| `css` |  `CSSProperties` | {} | container styles |\n| `width` |  `String` | 100% |  |\n| `height` |  `String` | 100% |  |\n| `alt` |  `String` | '' |  image alt attribute |\n\n\n| CSS Class                   | Description                            |\n| ---------------------- | -------------------------------------------- |\n| `__react_custom_product__hotspot_point_container` |  Spot container. |\n| `__react_custom_product__hotspot_point` |  Point. |\n| `__react_custom_product__hotspot_message` |  Custom spot message container. |\n\n\n## ProductMask - Svg Mask for products\n\nYou can choose either our 2 shapes or add yours.\n\n``` typescript\nexport default function ProductMaskExample() {\n  return \u003cProductMask type='2' src={`/autos/mask/1.webp`} css={{scale: '1.2'}} /\u003e\n}\n```\n\n| Prop                   | Type      | Default | Description                            |\n| ---------------------- | --------- | ------- | -------------------------------------------- |\n| `src` |  `String` | `required` | Image. |\n| `alt` |  `String` | '' | Alt attribute. |\n| `type` |  `String` | '1' | Shape, options: 1 or 2. If you add a new one, use the id of the new element: `id=\"clip-polygon--3\"`, here your type would be 3. |\n| `css` |  `CSSProperties` | {} | container styles |\n| `polygon` |  `React.Element` | undefined | Custom SVG Polygon Element. e.g. `\u003cclipPath id=\"clip-polygon--3\"\u003e\u003cpolygon points=\" 8 0, 8.1 0, 8.1 11, 0 11\"\u003e\u003c/polygon\u003e\u003crect x=\"8\" y=\"0\" width=\"14.2\" height=\"11\"\u003e\u003c/rect\u003e\u003cpolygon points=\"22.1 0, 30.2 0, 22.2 11, 22.1 11\"\u003e\u003c/polygon\u003e\u003c/clipPath\u003e` |\n\n\n[npm-badge]: https://img.shields.io/npm/v/react-custom-product.svg\n[npm]: https://www.npmjs.org/package/react-custom-product\n\n\n### Time coding on the projects so far:\n\nReact Library\n\n[![wakatime](https://wakatime.com/badge/user/aaf8dd71-b92d-4c70-b476-6cf74feeaf3e/project/c8513b27-d26d-4ffd-966b-f0c77e1275e6.svg)](https://wakatime.com/badge/user/aaf8dd71-b92d-4c70-b476-6cf74feeaf3e/project/c8513b27-d26d-4ffd-966b-f0c77e1275e6)\n\nNextJS Test\u0026Demo\n\n[![wakatime](https://wakatime.com/badge/user/aaf8dd71-b92d-4c70-b476-6cf74feeaf3e/project/5a2934be-0b62-49f3-b715-d1571030f001.svg)](https://wakatime.com/badge/user/aaf8dd71-b92d-4c70-b476-6cf74feeaf3e/project/5a2934be-0b62-49f3-b715-d1571030f001)\n\n\n[Demo Repo](https://github.com/thiswallz/react-custom-product-demo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthiswallz%2Freact-custom-product","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthiswallz%2Freact-custom-product","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthiswallz%2Freact-custom-product/lists"}