The Pixel Serve
component is a powerful and flexible React component designed to handle dynamic image rendering with support for multiple formats, lazy loading, and additional customization options.
- Multi-format support: Automatically generates image sources for AVIF, WebP, and other formats.
- Lazy Loading: Loads images only when they come into view, improving performance.
- Dynamic Dimensions: Allows for responsive width and height.
- Customizable: Supports styles, classes, and multiple use cases (e.g., background images, avatars).
- Placeholder Skeletons: Displays a loading skeleton until the image is ready.
To use this component in your project, install it via npm:
npm install pixel-serve-client
import Pixel from "pixel-serve-client";
const App = () => (
<Pixel
src="/path/to/image.jpg"
alt="Example Image"
width={300}
height={200}
/>
);
export default App;
Prop | Type | Default | Description |
---|---|---|---|
src |
string |
Required | The source URL of the image. |
className |
string |
undefined |
Custom CSS class for the component. |
alt |
string |
'image' |
Alt text for the image. |
style |
CSSProperties |
{} |
Inline styles for the image. |
background |
boolean |
false |
Whether the image is used as a background. |
lazy |
boolean |
true |
Enables lazy loading for the image. |
width |
number |
undefined |
Width of the image in pixels. |
height |
number |
undefined |
Height of the image in pixels. |
quality |
number |
undefined |
Image quality for compression (if applicable). |
userId |
string |
undefined |
ID of the user who owns the image (used in dynamic image paths). |
avif |
boolean |
true |
Whether to generate an AVIF source for the image. |
webp |
boolean |
true |
Whether to generate a WebP source for the image. |
mimeType |
string |
'jpeg' |
MIME type of the image (e.g., 'jpeg', 'png'). |
direct |
boolean |
false |
Loads the image directly without generating multiple formats. |
loader |
boolean |
true |
Displays a skeleton loader while the image is loading. |
dynamicDimension |
boolean |
false |
Dynamically adjusts dimensions based on the width and height provided. |
backendUrl |
string |
/api/v1/pixel/serve |
The backend URL for the image. |
folder |
'public' | 'private' |
'public' |
Specifies whether the image is in a public or private folder. |
type |
'normal' | 'avatar' |
'normal' |
Specifies the type of image (e.g., normal image or avatar). |
Using Pixel Serve
as a background image:
<Pixel
src="/path/to/background.jpg"
background={true}
style={{ borderRadius: "10px" }}
width={500}
height={300}
/>
This project is licensed under the MIT License. See the LICENSE file for details.
Developed by Hiprax.