A simple React component (written with Typescript) that allows users to scrub through images with their mouse.
- Can take a large amount of images, although recommend no more than 16
- Set
showHoverGrid
astrue
to show red image hover areas / edit mode - Can adjust
width
&height
, otherwise default will expand to fix100%
of parent container - Hide product name & id with
hideName
&hideId
- Pass child components to overlay your own custom UI
<ProductScrubber> {...} </ProductScrubber>
npm i product-scrubber --save
OR
yarn add product-scrubber --save
// types
type ProductScrubberTypes = {
children?: any;
onClickItem?: (activeId: string) => void;
data: Array<dataType>; // required
showHoverGrid?: boolean;
hideName?: boolean;
hideId?: boolean;
width?: string | number;
height?: string | number;
};
// example use
<ProductScrubber
onClickItem={onClickProductScrubber}
data={exampleData}
width={420}
height={420}
/>
Here is a quick example to get started:
// App.tsx
import React from 'react';
import { ProductScrubber } from 'product-scrubber';
const exampleData = [
{
id: 'EXAMPLE-ID-001: side',
name: "MEN'S SPEED LACE-UP SNEAKER IN BLACK",
default: true,
imagePath:
'https://github.com/b3nh/product-scrubber/blob/master/src/stories/assets/side.jpg?raw=true',
},
{
id: 'EXAMPLE-ID-001: front',
name: "MEN'S SPEED LACE-UP SNEAKER IN BLACK",
imagePath:
'https://github.com/b3nh/product-scrubber/blob/master/src/stories/assets/front.jpg?raw=true',
},
{
id: 'EXAMPLE-ID-001: back',
name: "MEN'S SPEED LACE-UP SNEAKER IN BLACK",
imagePath:
'https://github.com/b3nh/product-scrubber/blob/master/src/stories/assets/back.jpg?raw=true',
},
{
id: 'EXAMPLE-ID-001: top',
name: "MEN'S SPEED LACE-UP SNEAKER IN BLACK",
imagePath:
'https://github.com/b3nh/product-scrubber/blob/master/src/stories/assets/top.jpg?raw=true',
},
];
function App() {
const onClickProductScrubber = (id: string) => {
alert(id);
console.log(id);
};
return (
<div className="App">
<ProductScrubber
onClickItem={onClickProductScrubber}
data={exampleData}
width={420}
height={420}
/>
</div>
);
}
export default App;