Filters and Effects

1npm install pixel-craft --save

1import React from 'react';
2
3type FilterProps = {
4  src: string;
5  alt?: string;
6  grayscale?: number;   // 0 to 1
7  sepia?: number;       // 0 to 1
8  brightness?: number;  // 0.5 to 2
9  contrast?: number;    // 0.5 to 2
10  blur?: number;        // in px
11  width?: string;
12  height?: string;
13};
14
15const ImageFilter: React.FC<FilterProps> = ({
16  src,
17  alt = 'Filtered Image',
18  grayscale = 0,
19  sepia = 0,
20  brightness = 1,
21  contrast = 1,
22  blur = 0,
23  width = '300px',
24  height = 'auto',
25}) => {
26  const filterStyle = 
27  
28    grayscale({grayscale})
29    sepia({sepia})
30    brightness({brightness})
31    contrast({contrast})
32    blur({blur}px)
33  
34
35  return (
36    <img
37      src={src}
38      alt={alt}
39      style={{
40        filter: filterStyle,
41        width,
42        height,
43        borderRadius: '8px',
44      }}
45    />
46  );
47};
48
49export default ImageFilter