react-custom-product

A lightweight React component providing customization for your product image.

Demo https://react-custom-product-demo.vercel.app/

Features

• Zero dependencies.
• Multiple animation choices.
• Treeshakable (if you uise 1 component, others are not included in your bundle).
• 2.4kb gzipped (https://bundlephobia.com/package/react-custom-product)

Current components

• Custom Product Color
• 3D ShowCase (multiple images are needed)
• Product Switch
• Product Cover
• Product Gallery
• Hotspot

Under construction

• Hover product
• Masked Product
• Custom Background
• Auto Gallery

DEFINITIONS

ProductCustomColor - change your products color and have a nice animation.

Be sure you have exact images with just different colors. (different shapes or pxs wont work properly)

import { ProductCustomColor } from 'react-custom-product'

export default function Example() {
  return <ProductCustomColor 
    width="500px" 
    height="150px" 
    src="/img/model-1.png" 
  />
}

| Prop | Type | Default | Description | | ---------------------- | --------- | ------- | -------------------------------------------- | | src | String | required | Image (after you change the src, will trigger the effect). | | css | CSSProperties | {} | pass styles to the container | | width | String | 100% | Be sure you use a fixed px size for this effect | | height | String | 100% | Be sure you use a fixed px size for this effect | | duration | String | .6 | Milliseconds animation will last. |

ShowCase - show your product in 3d (works for web and mobile)

be sure you have more than +10 images to have a good transition, images must be the same, but takend from different angles.

import { ShowCase } from 'react-custom-product'

export default function Example() {
    const showCaseImages = [
      '/images/1.png',
      '/images/2.png',
      '/images/3.png',
      '...'
    ]

    return <ShowCase images={showCaseImages} />
}

| Prop | Type | Default | Description | | ---------------------- | --------- | ------- | -------------------------------------------- | | images | String[] | required | Images array (will be preload) | | bg | String | '' | Image for background. | | width | String | 100% | width size | | height | String | 100% | height size | | defaultDirection | Boolean | true| In case the drag and drop direction should goes to the opposite direction. | | initialImage | Number | 0 | Image you want to be show at first (array position) | | css | CSSProperties | {} | styles to the container | | throttle | Number | .04 | Milliseconds the mouse will be read to calculate and mvoe right/left. | | pxThreshold | Number | 4 | How many pixels are needed in order to make the decision of movement. |

ProductSwitch - Simple - switch from different products shapes.

import { ProductSwitch } from 'react-custom-product'

export default function Example() {
  return <ProductSwitch src="/img/model-1.png" />
}

| Prop | Type | Default | Description | | ---------------------- | --------- | ------- | -------------------------------------------- | | src | String | required | Image (after you change the src, will trigger the effect). | | css | CSSProperties | {} | styles to the container | | width | String | 100% | | | height | String | 100% | | | duration | String | 1 | Milliseconds animation will last. |

ProductCover - Product color cover.

Colors cover can be manually manipulated with this component.

import { ProductCover } from 'react-custom-product'

export default function Example() {
  return  <ProductCover
            src="/models/1.png"
            cover="/models/2.png"
            width="550px"
            height="400px"
            coverWidth={50}
            coverHeight={50} />
}

| Prop | Type | Default | Description | | ---------------------- | --------- | ------- | -------------------------------------------- | | src | String | required | Image. | | cover | String | required | Image which is covering the src. | | css | CSSProperties | {} | styles to the container | | width | String | 100% | | | height | String | 100% | | | coverWidth | Number | 100 | Percentage number | | coverHeight | Number | 100 | Percentage number |

SwitchGallery - Simple gallery.

Simple gallery to show multiple product images

export default function SwitchGalleryExample() {
  const images = [
    '/images/1.png',
    '/images/2.png',
    '/images/3.png',
    '...'
  ]

  return <SwitchGallery
    images={images}
  />
}

| Prop | Type | Default | Description | | ---------------------- | --------- | ------- | -------------------------------------------- | | images | String[] | required | Images. | | css | CSSProperties | {} | container styles | | cssImage | CSSProperties | {} | current image styles | | cssImageSelectorContainer | CSSProperties | {} | container preview images styles | | cssImageSelector | CSSProperties | {} | preview images styles |

ProductHotspot - Image Hotspot.

Hover some hotspot of your product and show info

const CustomMessage1 = () => <a href="#">Simple link</a>
const CustomMessage2 = () => <div>Custom message/info</div>

export default function ProductHotspotExample() {

  const spots = [
    {
      x: '35%',
      y: '70%',
      children: CustomMessage1()
    },
    {
      x: '65%',
      y: '20%',
      children: CustomMessage2()
    }
  ]

  return <ProductHotspot 
    src={`hotspot/1.webp`} spots={spots} height="auto" />
}

| Prop | Type | Default | Description | | ---------------------- | --------- | ------- | -------------------------------------------- | | src | String | required | Image. | | spots | ProductHotspotPoint[] | {} | positions and react element for each hotspot | | css | CSSProperties | {} | container styles | | width | String | 100% | | | height | String | 100% | | | alt | String | '' | image alt attribute |

| CSS Class | Description | | ---------------------- | -------------------------------------------- | | __react_custom_product__hotspot_point_container | Spot container. | | __react_custom_product__hotspot_point | Point. | | __react_custom_product__hotspot_message | Custom spot message container. |

ProductMask - Svg Mask for products

You can choose either our 2 shapes or add yours.

export default function ProductMaskExample() {
  return <ProductMask type='2' src={`/autos/mask/1.webp`} css={{scale: '1.2'}} />
}

| Prop | Type | Default | Description | | ---------------------- | --------- | ------- | -------------------------------------------- | | src | String | required | Image. | | alt | String | '' | Alt attribute. | | 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. | | css | CSSProperties | {} | container styles | | polygon | React.Element | undefined | Custom SVG Polygon Element. e.g. <clipPath id="clip-polygon--3"><polygon points=" 8 0, 8.1 0, 8.1 11, 0 11"></polygon><rect x="8" y="0" width="14.2" height="11"></rect><polygon points="22.1 0, 30.2 0, 22.2 11, 22.1 11"></polygon></clipPath> |

Time coding on the projects so far:

React Library

NextJS Test&Demo

Demo Repo