DEV Community: Mizan-Rifat

Keep Your Monorepo Clean in VS Code with a Workspace Checkout Script

Mizan-Rifat — Fri, 07 Jun 2024 18:35:09 +0000

Monorepos can be both a blessing and a curse. They offer a centralized codebase, but managing a large number of applications simultaneously in a Code Editor can quickly become overwhelming. The default behavior of any Code Editor, where all files and folders are visible in the explorer, makes searching for files a cluttered experience and makes the workspace messy.

In VS Code To address this issue and maintain a clean workspace, you can leverage the .vscode/settings.json file. By configuring the files.exclude property, you can hide specific files or folders from the file explorer. For example:

// .vscode/settings.json
{
  "files.exclude": {
    "apps/server": true
  }
}

This will hide the server app from the VS Code explorer without deleting it from the filesystem. However, manually updating this setting can be tedious. To streamline the process, Lets create a Node.js script that dynamically updates the files.exclude settings based on your current needs.

Introducing the Workspace Checkout Script

With this script and the enquirer npm package, you can create a simple command-line interface (CLI) to toggle the visibility of applications in your monorepo. Here’s how you can set it up:

1. install `enquirer`:

 npm i enquirer

2. Create the script:

Save the following script as scripts/workspace-checkout.js in your project.


import { fileURLToPath } from 'url';
import path, { dirname } from 'path';
import fs, { readdirSync } from 'fs';
import enquirer from 'enquirer';

// Get the current file's directory
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

// Destructure AutoComplete from enquirer
const { AutoComplete } = enquirer;

// Define paths for the VS Code settings file and the apps directory
const relativeFilePath = '../.vscode/settings.json';
const absoluteFilePath = path.join(__dirname, relativeFilePath);
const appsPath = path.join(__dirname, '../apps');

// List of apps to always exclude
const excludedApps = [];

// Read the VS Code settings file
fs.readFile(absoluteFilePath, 'utf8', async (err, data) => {
  if (err) {
    console.error('Error reading file:', err);
    return;
  }

  let jsonData;
  try {
    // Parse the JSON data from the settings file
    jsonData = JSON.parse(data);
  } catch (parseError) {
    console.error('Error parsing JSON:', parseError);
    return;
  }

  // Determine initially selected apps based on settings
  const initial = Object.keys(jsonData['files.exclude'])
    .filter(app => !jsonData['files.exclude'][app])
    .map(app => app.split('/')[1]);

  // Read the apps directory and filter out excluded apps
  const apps = readdirSync(appsPath, { withFileTypes: true })
    .filter(direct => {
      return direct.isDirectory() && !excludedApps.includes(direct.name);
    })
    .map(direct => direct.name);

  // Create a prompt for selecting apps to display
  const prompt = new AutoComplete({
    name: 'apps',
    message:
      'Press arrow keys to navigate and space to select/deselect apps. Press enter to confirm.',
    multiple: true,
    choices: [...apps],
    initial: initial.filter(app => !excludedApps.includes(app))
  });

  // Get the user's selection
  const answer = await prompt.run();

  // Update the VS Code settings based on the user's selection
  apps.forEach(app => {
    jsonData['files.exclude'][`apps/${app}`] = !answer.includes(app);
  });

  const updatedJsonData = JSON.stringify(jsonData, null, 2);

  // Write the updated settings back to the file
  fs.writeFile(absoluteFilePath, updatedJsonData, 'utf8', writeErr => {
    if (writeErr) {
      console.error('Error writing to file:', writeErr);
      return;
    }
    console.log('Checkout successful.');
  });
});

3.Update your `package.json`:

Add a script entry to your package.json to run the checkout script.

"scripts": {
  // Others script
  "checkout": "node scripts/workspace-checkout.js"
}

4.Run the script:

Open your terminal and type the following command to run the script:

npm run checkout

This command will present a list of all available apps with a checkmark. Use the spacebar to toggle the selection and press enter to confirm. Only the selected apps will be visible in the VS Code file manager. This keeps your workspace clean and focused on the apps you are currently working on, while still keeping all files intact on the filesystem.

Conclusion

Using a monorepo can significantly enhance collaboration and code management across multiple applications. However, it's essential to keep your development environment organized. By leveraging the .vscode/settings.json file and automating the process with a Node.js script, you can efficiently manage which apps are visible in your VS Code explorer. This approach keeps your workspace clean, enhances productivity, and reduces clutter.

Try setting up this script in your monorepo and enjoy a more streamlined development experience!

And if you have a better approach, please share your insights in the comments. I'm always looking for new and improved ways to manage my development environments effectively.

Streamlining Absolute Imports in React with TypeScript and Vite

Mizan-Rifat — Wed, 23 Aug 2023 17:59:53 +0000

Absolute imports can significantly improve code readability and maintainability by eliminating the need for complex relative paths. If you're working on a React project with TypeScript and Vite, you've likely encountered solutions involving aliasing in vite.config.js and tsconfig.json. In this tutorial, I'll introduce a simpler approach using the vite-tsconfig-paths plugin. This method not only reduces setup complexity but also offers added convenience for your import workflow.

The Conventional Approach

Traditionally, achieving absolute imports in a React project involved a series of configurations that could become cumbersome as your project grew. This approach typically includes:

1.Setting Up Aliases
In vite.config.js, you'd configure aliases for specific
directories:

 import path from 'path';

 export default {
   // ...other config options
   resolve: {
     alias: {
       '@assets': path.resolve(__dirname, 'src/assets'),
       '@components': path.resolve(__dirname, 'src/components'),
       // ...other aliases
     },
   },
 };

2.Configuring TypeScript Paths
In your tsconfig.json, you'd set up path mappings for these aliases:

 {
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
       "@/assets": ["./src/assets/*"],
       "@/components": ["./src/components/*"],
       // ...other paths
     }
   }
 }

This approach becomes unwieldy as your project expands, requiring manual configuration for each module or component.

Introducing the Simplified Solution

With the vite-tsconfig-paths plugin, we can simplify this process while preserving the benefits of absolute imports.

Project Setup : Start by creating your React ts project with Vite:

npm create vite@latest your-react-app -- --template react-ts

Installing Dependencies :

cd your-react-app
npm i

Installing vite-tsconfig-paths plugin :

npm i vite-tsconfig-paths -D

Configure TypeScript : In your tsconfig.json, streamline the path mappings:

 "compilerOptions": {
    // ...other options
    "paths": {
      "*": ["./src/*"]
    }
  }

This change allows us to skip the need to declare individual alias definitions. With this setup, you can now import from any src folder without needing to declare modules for each specific folder.

Integration with Vite : In vite.config.js, integrate the plugin:

import tsconfigPaths from 'vite-tsconfig-paths';

export default {
  // ...other config options
  plugins: [tsconfigPaths(), react(), ...other plugins],
};

Now, Vite will automatically use your TypeScript path settings to figure out how to find the files you want to import.

Seamless Absolute Imports

With the setup in place, you can now use absolute imports effortlessly in your code:

import Button from 'components/Button';
import logo from 'assets/logo.png';
import useCustomHook from 'hooks/useCustomHook';

External Module Imports

Need to import modules from a folder outside the src directory? It's a breeze:

Extend your tsconfig.json:

{
  "compilerOptions": {
    // ...other options
    "paths": {
      "*": ["./src/*"],
      "types/*": ["./types/*"]
    }
  }
}

Now, import from external folders:

import { Member } from 'types/user/members';

Benefits of the New Approach

Benefits of the New Approach
The streamlined setup with vite-tsconfig-paths offers several advantages:

Simplified Configuration
Gone are the days of defining individual aliases for each module or component. The wildcard path mapping automatically covers your entire src directory.
Reduced Maintenance
As your project grows, you won't need to continuously update alias configurations. The simplified path mapping remains effective regardless of the new additions.
Seamless Transition
Moving from the conventional approach to this new method is straightforward. You can gradually transition by leveraging the wildcard path and updating specific paths as needed.
Consistency with TypeScript
Since we're utilizing TypeScript's native path mapping, our imports remain aligned with the development experience provided by TypeScript.

Conclusion

Simplify your React project's import workflow with the vite-tsconfig-paths plugin. By harnessing the power of TypeScript's path mapping, you can achieve cleaner, more organized imports without the need for complex alias configurations. This approach not only reduces setup overhead but also enhances the maintainability and readability of your codebase as it scales.

Give this approach a try in your projects and experience the benefits of streamlined absolute imports.

Creating an Image Upload Modal with Crop and Rotate Functionality in React

Mizan-Rifat — Wed, 26 Jul 2023 15:41:16 +0000

Introduction:

Welcome to this tutorial on creating an image modal with crop and rotate functionality in React! In this blog post, we'll explore how to leverage the power of react-easy-crop library to build an interactive image modal in react similar to those found in popular platforms like GitHub or Facebook.

here is live demo link
In the live demo, you can experience the full functionality of the image modal with crop and rotate features.

The focus of this tutorial is to develop a solution that minimizes the need for excessive prop passing between components. To achieve this, we'll harness the capabilities of React's context API. By creating a context provider and a custom hook, we can seamlessly share data and functions across our components without the hassle of passing props down the component tree.

So, let's dive in and learn how to create an image modal that allows users to crop and rotate their uploaded images.

Setting Up the Project:

To get started with our image modal implementation, i'll assume you already have a React project set up. For UI i’m using Tailwind CSS. But you can use any UI library as your wish.
For the image cropping and rotating functionality, we'll be utilizing the react-easy-crop library. This library provides a simple and intuitive way to crop and interact with images and videos within a React component.
We will also use the heroicons and classnames libraries in our tutorial. To install all the libraries and their dependencies, open your terminal and navigate to your project's directory. Run the following command:

npm install react-easy-crop classnames @heroicons/react
#or
yarn add react-easy-crop classnames @heroicons/react

Now that we have react-easy-crop and other libraries are installed, let's move on to creating the necessary components and implementing the image modal functionality.

Creating base components:

In this tutorial, we'll create two essential base components Button and Modal which will be needed in our image modal with crop and rotate functionality. Let's take a closer look at each of them:

// src/components/base/Button.jsx

import classNames from 'classnames';

const Button = ({ variant, className, children, ...rest }) => {
  return (
    <button
      type="button"
      className={classNames(className, 'hover:shadow-inner px-4 py-2 text-sm rounded-3xl', {
        'bg-blue-500 text-white hover:bg-blue-700 hover:text-white': variant === 'primary',
        'bg-red-500 text-white hover:bg-red-700 hover:text-white': variant === 'secondary',
        'bg-white text-gray-900 hover:bg-white hover:text-blue-500': variant === 'light'
      })}
      {...rest}
    >
      {children}
    </button>
  );
};

export default Button;

The Button component is a reusable and versatile element that allows us to create different styles of buttons with ease.

//src/components/base/Modal.jsx

import classNames from 'classnames';

const Modal = ({ open, children }) => {
  return (
    <div
      className={classNames('fixed z-10 overflow-y-auto top-0 w-full left-0', {
        hidden: !open
      })}
      id="modal"
    >
      <div className="flex items-center justify-center min-height-100vh pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div className="fixed inset-0 transition-opacity">
          <div className="absolute inset-0 bg-gray-900 opacity-75"></div>
          <span className="hidden sm:inline-block sm:align-middle sm:h-screen"></span>
          <div
            className="inline-block align-center bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full"
            role="dialog"
            aria-modal="true"
            aria-labelledby="modal-headline"
          >
            <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">{children}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Modal;

The Modal component plays a crucial role in our image modal implementation. It handles the display of content in a modal overlay, providing a clean and focused interface for editing images.

Creating the image crop context:

One of the essential aspects of building our image modal with crop and rotate functionality is to manage the state effectively. To achieve this, we'll create a React context that will provide the necessary data and functions to components that require access to this state.

//src/providers/ImageCropProvider.jsx

/* eslint-disable react-refresh/only-export-components */
import { createContext, useCallback, useContext, useState } from 'react';
import getCroppedImg from '../helpers/cropImage';

export const ImageCropContext = createContext({});

const defaultImage = null;
const defaultCrop = { x: 0, y: 0 };
const defaultRotation = 0;
const defaultZoom = 1;
const defaultCroppedAreaPixels = null;

const ImageCropProvider = ({
  children,
  max_zoom = 3,
  min_zoom = 1,
  zoom_step = 0.1,
  max_rotation = 360,
  min_rotation = 0,
  rotation_step = 5
}) => {
  const [image, setImage] = useState(defaultImage);
  const [crop, setCrop] = useState(defaultCrop);
  const [rotation, setRotation] = useState(defaultRotation);
  const [zoom, setZoom] = useState(defaultZoom);
  const [croppedAreaPixels, setCroppedAreaPixels] = useState(defaultCroppedAreaPixels);

  const onCropComplete = useCallback((_croppedArea, croppedAreaPixels) => {
    setCroppedAreaPixels(croppedAreaPixels);
  }, []);

  const handleZoomIn = () => {
    if (zoom < max_zoom) {
      setZoom(zoom + zoom_step * 2);
    }
  };

  const handleZoomOut = () => {
    if (zoom > min_zoom) {
      setZoom(zoom - zoom_step * 2);
    }
  };

  const handleRotateCw = () => {
    setRotation(rotation + rotation_step);
  };

  const handleRotateAntiCw = () => {
    setRotation(rotation - rotation_step);
  };

  const getProcessedImage = async () => {
    if (image && croppedAreaPixels) {
      const croppedImage = await getCroppedImg(image, croppedAreaPixels, rotation);
      const imageFile = new File([croppedImage.file], `img-${Date.now()}.png`, {
        type: 'image/png'
      });
      return imageFile;
    }
  };

  const resetStates = () => {
    setImage(defaultImage);
    setCrop(defaultCrop);
    setRotation(defaultRotation);
    setZoom(defaultZoom);
    setCroppedAreaPixels(defaultCroppedAreaPixels);
  };

  return (
    <ImageCropContext.Provider
      value={{
        image,
        setImage,
        zoom,
        setZoom,
        rotation,
        setRotation,
        crop,
        setCrop,
        croppedAreaPixels,
        setCroppedAreaPixels,
        onCropComplete,
        getProcessedImage,
        handleZoomIn,
        handleZoomOut,
        handleRotateAntiCw,
        handleRotateCw,
        max_zoom,
        min_zoom,
        zoom_step,
        max_rotation,
        min_rotation,
        rotation_step,
        resetStates
      }}
    >
      {children}
    </ImageCropContext.Provider>
  );
};

export const useImageCropContext = () => useContext(ImageCropContext);

export default ImageCropProvider;

In the provided code snippet, we've defined the ImageCropProvider component. This component serves as the context provider and wraps its children with the ImageCropContext.Provider. Let's take a closer look at how this works:

The ImageCropContext will be our centralized state management solution for image cropping and rotating.
It is a functional component that takes several optional props related to the configuration of image cropping and rotation. These props include max_zoom, min_zoom, zoom_step, max_rotation, min_rotation, and rotation_step, which can be customized based on the specific requirements of the application.

It will encapsulate the following state variables:

image: Holds the selected image that we want to crop and rotate.
crop: Represents the x and y coordinates of the current cropping area.
rotation: Keeps track of the rotation angle of the image.
zoom: Manages the zoom level of the image.
croppedAreaPixels: Stores the pixel values of the cropped area.

Additionally, we'll include several utility functions that allow us to manipulate the zoom and rotation of the image:

handleZoomIn: Increases the zoom level (up to a maximum value).
handleZoomOut: Decreases the zoom level (down to a minimum value).
handleRotateCw: Rotates the image clockwise by a specified angle.
handleRotateAntiCw: Rotates the image anti-clockwise by a specified angle.
resetStates: Reset all the states.

Furthermore, we've created a function called getProcessedImage. This function uses a helper function, getCroppedImg (not shown in this code snippet), to extract the cropped image based on the original image, the pixel values of the cropped area, and the rotation angle. The result is a new File object representing the cropped image, which can be used later to upload to the server.

Also we created a custom hook useImageCropContext to consume the ImageCropContext in other components

Building the Custom Cropper Component

Now, it's time to build a custom Cropper component that utilizes the react-easy-crop library, allowing users to interactively crop and rotate their selected images.

//src/components/cropper/Cropper.jsx

import EasyCropper from 'react-easy-crop';
import { useImageCropContext } from '../../providers/ImageCropProvider';

const Cropper = () => {
  const { image, zoom, setZoom, rotation, setRotation, crop, setCrop, onCropComplete } =
    useImageCropContext();

  return (
    <EasyCropper
      image={image || undefined}
      crop={crop}
      zoom={zoom}
      rotation={rotation}
      cropShape="round"
      aspect={1}
      onCropChange={setCrop}
      onCropComplete={onCropComplete}
      onZoomChange={setZoom}
      setRotation={setRotation}
      showGrid={false}
      cropSize={{ width: 185, height: 185 }}
      style={{
        containerStyle: {
          height: 220,
          width: 220,
          top: 8,
          bottom: 8,
          left: 8,
          right: 8
        }
      }}
    />
  );
};

export default Cropper;

The Cropper component serves as an interface between the react-easy-crop library and our ImageCropContext. It accesses the necessary state and functions from the context using the useImageCropContext custom hook. Here's how it works:

Accessing Context Data:
- We use the useImageCropContext hook to access the data from the ImageCropContext. This hook returns an object that contains the state variables and functions we need for the cropping and rotating functionality.
- Destructuring this object, we get access to image, zoom, setZoom, rotation, setRotation, crop, setCrop, and onCropComplete.
EasyCropper Component:
- The EasyCropper component is imported from the react-easy-crop library. It is a versatile component that provides interactive image cropping and rotation features.
- We pass various props to this component to control its behavior based on the state from the ImageCropContext.
Props and Functionality:
- image: We provide the image from our context as a prop to EasyCropper so that it knows which image to crop and display. If image is undefined, the cropper will not render any image initially.
- crop, zoom, and rotation: These props are linked to their respective state variables from the context, ensuring that the cropper reflects the current crop, zoom, and rotation values.
- cropShape and aspect: We set cropShape to "round" and aspect to 1, indicating that the cropping area should have a circular shape and maintain a 1:1 aspect ratio.
- onCropChange, onZoomChange, and setRotation: These callback props update the corresponding state variables in the context whenever the user interacts with the cropper.
Styling the Cropper:
- We provide a style object to customize the appearance of the EasyCropper component. In this example, we set the height and width of the cropper container to 220 pixels, with a margin of 8 pixels around the edges to create some padding.

Building the Image Crop Modal Content

With the ImageCropContext and Cropper component in place, we're ready to construct the core of our image crop modal. The ImageCropModalContent component is where users can interact with the cropper, adjust zoom and rotation, and upload new images for cropping and rotating.

To begin, we'll need some CSS styles for the crop container. Add the following CSS in the index.css file:

.crop-container {
  position: relative;
  width: 236px;
  height: 236px;

  background: linear-gradient(to right, #cbd4e1 8px, transparent 8px) 0 0,
    linear-gradient(to right, #cbd4e1 8px, transparent 8px) 0 100%,
    linear-gradient(to left, #cbd4e1 8px, transparent 8px) 100% 0,
    linear-gradient(to left, #cbd4e1 8px, transparent 8px) 100% 100%,
    linear-gradient(to bottom, #cbd4e1 8px, transparent 8px) 0 0,
    linear-gradient(to bottom, #cbd4e1 8px, transparent 8px) 100% 0,
    linear-gradient(to top, #cbd4e1 8px, transparent 8px) 0 100%,
    linear-gradient(to top, #cbd4e1 8px, transparent 8px) 100% 100%;

  background-repeat: no-repeat;
  background-size: 70px 70px;
}
.reactEasyCrop_CropArea {
  color: rgba(255, 255, 255, 0.8) !important;
}

Now, let's proceed with the ImageCropModalContent component implementation:

//src/components/ImageCropModalContent.jsx

import { readFile } from '../helpers/cropImage';
import { useImageCropContext } from '../providers/ImageCropProvider';
import Button from '../components/base/Button';
import Cropper from '../components/cropper/Cropper';
import { RotationSlider, ZoomSlider } from '../components/cropper/Sliders';

const ImageCropModalContent = ({ handleDone, handleClose }) => {
  const { setImage } = useImageCropContext();

  const handleFileChange = async ({ target: { files } }) => {
    const file = files && files[0];
    const imageDataUrl = await readFile(file);
    setImage(imageDataUrl);
  };

  return (
    <div className="text-center relative">
      <h5 className="text-gray-800 mb-4">Edit profile picture</h5>
      <div className="border border-dashed border-gray-200 p-6 rounded-lg">
        <div className="flex justify-center">
          <div className="crop-container mb-4">
            <Cropper />
          </div>
        </div>
        <ZoomSlider className="mb-4" />
        <RotationSlider className="mb-4" />
        <input
          type="file"
          multiple
          onChange={handleFileChange}
          className="hidden"
          id="avatarInput"
          accept="image/*"
        />

        <Button variant="light" className="shadow w-full mb-4 hover:shadow-lg">
          <label htmlFor="avatarInput">Upload Another Picture</label>
        </Button>
        <div className="flex gap-2">
          <Button variant="secondary" onClick={handleClose}>
            Cancel
          </Button>
          <Button variant="primary" className="w-full" onClick={handleDone}>
            Done & Save
          </Button>
        </div>
      </div>
    </div>
  );
};

export default ImageCropModalContent;

Let's explore the code of the ImageCropModalContent component and the ZoomSlider and RotationSlider components, which enable users to control the zoom and rotation of the image while cropping.

The ImageCropModalContent component begins by importing the readFile function from helpers/cropImage. This function is responsible for reading the image file and returning its data URL.
We also import the useImageCropContext hook from providers/ImageCropProvider to access the setImage function from the context. When users select an image file, the handleFileChange function reads the image data URL and sets it in the context using setImage.
Rendering the Cropper: The ImageCropModalContent component renders the Cropper component, allowing users to interactively crop and rotate the selected image. We place the Cropper inside a container with the class crop-container for styling purposes.
Zoom and Rotation Sliders: We import the ZoomSlider and RotationSlider components from components/cropper/Sliders. These sliders are responsible for adjusting the zoom level and rotation angle of the image, respectively.
File Input and Upload Button: We include an input element with type file to allow users to upload another picture for cropping. The handleFileChange function is triggered when users select a new image file. When users click on the Upload Another Picture button, it triggers the file input to open, enabling them to choose a new image.
Action Buttons: We provide two action buttons: Cancel and Done & Save. The Cancel button closes the image crop modal when clicked, while the Done & Save button saves the cropped image and triggers the handleDone function, which is passed as a prop from the parent component.

ZoomSlider and RotationSlider Components:

The ZoomSlider and RotationSlider components allow users to control the zoom level and rotation angle of the image during cropping. They interact with the useImageCropContext hook to access the necessary state and functions from the ImageCropContext.

//src/components/cropper/Sliders.jsx

import { useImageCropContext } from '../../providers/ImageCropProvider';
import {
  ArrowUturnLeftIcon,
  ArrowUturnRightIcon,
  MinusIcon,
  PlusIcon
} from '@heroicons/react/24/solid';
import classNames from 'classnames';

export const ZoomSlider = ({ className }) => {
  const { zoom, setZoom, handleZoomIn, handleZoomOut, max_zoom, min_zoom, zoom_step } =
    useImageCropContext();

  return (
    <div className={classNames(className, 'flex items-center justify-center gap-2')}>
      <button className="p-1" onClick={handleZoomOut}>
        <MinusIcon className="text-gray-400 w-4" />
      </button>
      <input
        type="range"
        name="volju"
        min={min_zoom}
        max={max_zoom}
        step={zoom_step}
        value={zoom}
        onChange={e => {
          setZoom(Number(e.target.value));
        }}
      />
      <button className="p-1" onClick={handleZoomIn}>
        <PlusIcon className="text-gray-400 w-4" />
      </button>
    </div>
  );
};

export const RotationSlider = ({ className }) => {
  const {
    rotation,
    setRotation,
    max_rotation,
    min_rotation,
    rotation_step,
    handleRotateAntiCw,
    handleRotateCw
  } = useImageCropContext();

  return (
    <div className={classNames(className, 'flex items-center justify-center gap-2')}>
      <button className="p-1" onClick={handleRotateAntiCw}>
        <ArrowUturnLeftIcon className="text-gray-400 w-4" />
      </button>
      <input
        type="range"
        name="volju"
        min={min_rotation}
        max={max_rotation}
        step={rotation_step}
        value={rotation}
        onChange={e => {
          setRotation(Number(e.target.value));
        }}
      />
      <button className="p-1" onClick={handleRotateCw}>
        <ArrowUturnRightIcon className="text-gray-400 w-4" />
      </button>
    </div>
  );
};

Helper Functions for Image Processing:

To achieve image cropping and rotating, we utilize a set of helper functions adapted from the examples of the react-easy-crop library. These functions simplify the image processing tasks and enable us to generate the final cropped image.

//src/helpers/cropImage.js

export const readFile = file => {
  return new Promise(resolve => {
    const reader = new FileReader();
    reader.addEventListener('load', () => resolve(reader.result), false);
    reader.readAsDataURL(file);
  });
};

export const createImage = url =>
  new Promise((resolve, reject) => {
    const image = new Image();
    image.addEventListener('load', () => resolve(image));
    image.addEventListener('error', error => reject(error));
    image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues on CodeSandbox
    image.src = url;
  });

export function getRadianAngle(degreeValue) {
  return (degreeValue * Math.PI) / 180;
}

/**
 * Returns the new bounding area of a rotated rectangle.
 */
export function rotateSize(width, height, rotation) {
  const rotRad = getRadianAngle(rotation);

  return {
    width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
    height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
  };
}

const getCroppedImg = async (
  imageSrc,
  pixelCrop = { x: 0, y: 0 },
  rotation = 0,
  flip = { horizontal: false, vertical: false }
) => {
  const image = await createImage(imageSrc);
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  if (!ctx) {
    return null;
  }

  const rotRad = getRadianAngle(rotation);

  // calculate bounding box of the rotated image
  const { width: bBoxWidth, height: bBoxHeight } = rotateSize(image.width, image.height, rotation);

  // set canvas size to match the bounding box
  canvas.width = bBoxWidth;
  canvas.height = bBoxHeight;

  // translate canvas context to a central location to allow rotating and flipping around the center
  ctx.translate(bBoxWidth / 2, bBoxHeight / 2);
  ctx.rotate(rotRad);
  ctx.scale(flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1);
  ctx.translate(-image.width / 2, -image.height / 2);

  // draw rotated image
  ctx.drawImage(image, 0, 0);

  // croppedAreaPixels values are bounding box relative
  // extract the cropped image using these values
  const data = ctx.getImageData(pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height);

  // set canvas width to final desired crop size - this will clear existing context
  canvas.width = pixelCrop.width;
  canvas.height = pixelCrop.height;

  // paste generated rotate image at the top left corner
  ctx.putImageData(data, 0, 0);

  // As Base64 string
  // return canvas.toDataURL('image/jpeg');

  // As a blob
  return new Promise(resolve => {
    canvas.toBlob(file => {
      resolve({ file, url: URL.createObjectURL(file) });
    }, 'image/jpeg');
  });
};

export default getCroppedImg;

We used readFile, getCroppedImg functions in our components. Others functions wil be user internally among this functions.

Implementing the ImageModal and ImageCrop Interaction

In this section, we'll create the ImageCrop component, which acts as the main entry point for users to interact with the image modal and crop/rotate their chosen images.

//src/components/ImageCrop.jsx

import { useState } from 'react';
import user1 from '../assets/user_1.png';
import Modal from '../components/base/Modal';
import { readFile } from '../helpers/cropImage';
import ImageCropModalContent from './ImageCropModalContent';
import { useImageCropContext } from '../providers/ImageCropProvider';

const ImageCrop = () => {
  const [openModal, setOpenModal] = useState(false);
  const [preview, setPreview] = useState(user1);

  const { getProcessedImage, setImage, resetStates } = useImageCropContext();

  const handleDone = async () => {
    const avatar = await getProcessedImage();
    setPreview(window.URL.createObjectURL(avatar));
    resetStates();
    setOpenModal(false);
  };

  const handleFileChange = async ({ target: { files } }) => {
    const file = files && files[0];
    const imageDataUrl = await readFile(file);
    setImage(imageDataUrl);
    setOpenModal(true);
  };

  return (
    <div className="bg-gray-100 h-screen flex justify-center items-center">
      <input
        type="file"
        onChange={handleFileChange}
        className="hidden"
        id="avatarInput"
        accept="image/*"
      />
      <label htmlFor="avatarInput" className="cursor-pointer">
        <img
          src={preview}
          height={192}
          width={192}
          className="object-cover rounded-full h-48 w-48"
          alt=""
        />
      </label>

      <Modal open={openModal} handleClose={() => setOpenModal(false)}>
        <ImageCropModalContent handleDone={handleDone} handleClose={() => setOpenModal(false)} />
      </Modal>
    </div>
  );
};

export default ImageCrop;

Integrating with ImageCropContext:

State and Image Preview: The ImageCrop component sets up two state variables: openModal and preview. openModal: Controls the visibility of the image modal. It is initially set to false and becomes true when users upload an image or open the modal to crop and rotate. preview: Holds the URL of the image to be displayed as a preview before cropping. It is initially set to a default image (user1 in this case).
Image Upload and Modal Interaction: Users can click on the img element, which is a label for the hidden file input. When clicked, the file input dialog opens, allowing users to select an image to upload. The handleUpload function is triggered when an image is selected. It reads the image data URL using the readFile function and sets it in the context using setImage. It also sets the openModal state to true, showing the image modal.
ImageModal and ImageCropModalContent Integration: The ImageCrop component renders an ImageModal component. The ImageCropModalContent is passed as the content of the modal. The open prop of Modal controls the visibility of the modal, and the handleClose function passed as the handleClose prop is used to close the modal when needed.
Image Cropping and Preview Update: The handleDone function is called when users finish cropping and click the Done & Save button in the ImageCropModalContent. Inside handleDone, we call the getCroppedImage function to get the cropped image from the context. The resulting File object is converted into a preview URL using URL.createObjectURL, which is then set in the preview state, updating the image preview with the cropped version. Finally, we set openModal to false, closing the image modal.

Integrating the ImageCrop Component

The App component serves as the container for the ImageCrop component, which provides users with an interface to interact with the image modal for cropping and rotating images. In your case it may be a different component

//src/App.jsx

import ImageCrop from './components/ImageCrop';
import ImageCropProvider from './providers/ImageCropProvider';

const App = () => {
  return (
    <div className="bg-gray-100 h-screen flex justify-center items-center">
      <ImageCropProvider>
        <ImageCrop />
      </ImageCropProvider>
    </div>
  );
};

export default App;

In the App component, we wrap the ImageCrop component with the ImageCropProvider. This ensures that the ImageCrop component has access to the ImageCropContext, enabling it to manage the state and functionalities for image cropping and rotation effectively.
The ImageCrop component serves as the main user interaction point for selecting, cropping, and rotating images.
By wrapping the ImageCrop component with the ImageCropProvider, it can access the necessary context and seamlessly interact with the Cropper component and ImageCropModalContent.

Conclusion

In conclusion, we have successfully implemented an image modal with crop and rotation functionalities using React, and the react-easy-crop library. By utilizing the ImageCropProvider context, we effectively managed the state and actions required for image manipulation, reducing the need for excessive prop passing between components.

With this image modal in place, users can now effortlessly edit their profile pictures or any other images uploaded to the application.

here is full project code link: GitHub Code Source

Hope this tutorial has been helpful in expanding your knowledge of React, and that you're inspired to apply these techniques to enhance your own projects.

DEV Community: Mizan-Rifat

Keep Your Monorepo Clean in VS Code with a Workspace Checkout Script

Introducing the Workspace Checkout Script

1. install enquirer:

2. Create the script:

3.Update your package.json:

4.Run the script:

Conclusion

Streamlining Absolute Imports in React with TypeScript and Vite

The Conventional Approach

Introducing the Simplified Solution

Seamless Absolute Imports

External Module Imports

Benefits of the New Approach

Conclusion

Creating an Image Upload Modal with Crop and Rotate Functionality in React

Introduction:

Setting Up the Project:

Creating base components:

Creating the image crop context:

Building the Custom Cropper Component

Building the Image Crop Modal Content

ZoomSlider and RotationSlider Components:

Helper Functions for Image Processing:

Implementing the ImageModal and ImageCrop Interaction

Integrating the ImageCrop Component

Conclusion

1. install `enquirer`:

3.Update your `package.json`: