react-custom-product v1.1.1

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" 
  />
}

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} />
}

ProductSwitch - Simple - switch from different products shapes.

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

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

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} />
}

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}
  />
}

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" />
}

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'}} />
}

Time coding on the projects so far:

React Library

NextJS Test&Demo

Demo Repo