pixel-serve-client

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.


Keywords
Pixel Serve, Image, Lazy Load, Responsive, React, Component, Image Serving, Image Optimization, Image Resizing, Image Formatting, Image Transformation
License
MIT
Install
npm install pixel-serve-client@0.0.4

Documentation

Pixel Serve Client Component

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.

Features

  • 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.

Installation

To use this component in your project, install it via npm:

npm install pixel-serve-client

Usage

Basic Example

import Pixel from "pixel-serve-client";

const App = () => (
  <Pixel
    src="/path/to/image.jpg"
    alt="Example Image"
    width={300}
    height={200}
  />
);

export default App;

Props

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).

Other Examples

Using Pixel Serve as a background image:

<Pixel
  src="/path/to/background.jpg"
  background={true}
  style={{ borderRadius: "10px" }}
  width={500}
  height={300}
/>

License

This project is licensed under the MIT License. See the LICENSE file for details.

Author

Developed by Hiprax.