react-image-crop-slider v0.0.4

react-image-crop-slider

react-image-crop-slider is a React component that enables users to easily adjust and crop images by using a slider to zoom in or out for precise alignment and cropping. This component is particularly useful for applications where users upload and align images before use.

Features

• Supports zooming in/out of images via a slider.
• Simple image alignment within the cropping area.
• Customizable for integration into other React projects.

Installation

Install using npm or yarn:

npm install react-image-crop-slider

Or

yarn add react-image-crop-slider

Add style of component

import "react-image-crop-slider/dist/index.css";

Usage

Below is a basic example of how to use react-image-crop-slider:

import React, { useState } from "react";
import "react-image-crop-slider/dist/index.css";
import { CropImageWrapper, CropImage } from "react-image-crop-slider";

const App = () => {
  const handleWhenCropImageSuccess = (result?: File | string) => {
    console.log("Result", result);
  };

  return (
    <CropImageWrapper
      imageData="https://images.unsplash.com/photo-1428606381429-22224991fb0c"
      onCropSuccess={handleWhenCropImageSuccess}
    >
      {({ onCrop }) => {
        return (
          <div>
            <CropImage aspect={1} />
            <button onClick={onCrop}>Crop</button>
          </div>
        );
      }}
    </CropImageWrapper>
  );
};

export default App;

Props

CropImageWrapper

CropImage

Contribution

If you have improvement ideas or find issues, please create an issue or open a pull request to contribute to the project.

License

react-image-crop-slider is licensed under the MIT License.