Installation

Pixfly makes integrating image management and transformations in your web app easy. Follow the steps below to install and configure Pixfly in your project.

System Requirements

To get started, make sure you meet the following system requirements:

  • React 18 or later
  • Axios
  • Framer motion

Step 1: Install Pixfly Kit

Install Pixfly using the following npm command. It’s quick and easy!

$ npm i pixfly-kit axios framer-motion

Pixfly Components

Pixfly offers two powerful components to help you handle image uploading and transformation seamlessly in your web app:

PixflyUploader

The PixflyUploader component is designed to make image uploads in your web app fast and efficient. It provides a simple interface to upload images, manage storage, and handle the upload process effortlessly. With just a few lines of code, your users can upload images directly to your server or cloud storage. It’s secure, fast, and integrates seamlessly into your web app.

Key Features:

  1. Like a beautiful upload component, easy to integrate with just a few lines of code
  2. Easy-to-use interface for image uploads, with real-time progress updates
  3. Customizable error handling and success notifications
  4. Integrate with your existing storage solutions (AWS S3, Cloudinary, etc.)
  5. Easy to customize and extend with your own custom components and styles

thepixfly.com

PixflyTransform

The PixflyTransform component allows you to manipulate images on the fly using direct API URLs. Whether you need to resize, crop, rotate, or apply other transformations, PixflyTransform handles all of it without modifying the original image. This component is highly flexible and can be integrated easily into your application.

Key Features:

  1. Resize, crop, and apply transformations to images (jpg, png, webp, avif, and more)
  2. Real-time changes via direct API URL
  3. Maintains original image integrity while performing transformations
  4. Customize image rendering with options like color palette, contrast, saturation, and more
  5. Intelligent image cropping with focus on subjects
  6. Add watermarks, logos, or text overlays to your images
  7. Compress images for reduced file size and faster loading times
  8. Transform images between formats (jpg, png, webp, avif, and more) for best performance

thepixfly.com

Once you’ve installed Pixfly and understand the components, proceed to the next step to learn how to use them in your project.