React hook for smartcrop.js to content aware image cropping with points of interest and facial recognition.

Usage no npm install needed!

<script type="module">
  import useSmartcrop from '';



This is the React Hook version of jwagner/smartcrop.js + lokesh/color-thief with Typescript support.

We made this hook for to enable developers to create content-aware marketing and social images but it is useful for any kind of project.

example of content aware cropping


Install this dependency:

yarn add use-smartcrop

By default images are loading with crossOrigin="" prop. See this StackOverflow thread.

Common case usage:

import React from "react";
import { useSmartcrop, SmartcropStatus } from "use-smartcrop";

function App() {
  const src = "";
  // Width and height are required.
  const [cropped, error] = useSmartcrop({ src }, { width: 200, height: 400, minScale: 1.0 });
  if (error) {

  return (
      {cropped && <img src={cropped} />}



const [dataURL, error] = useSmartcrop(
   * Properties of a <img> element.
   * Smartcrop will not be executed (so `dataURL` will be null) if `src` is not provided.
   * */
  image: ComponentProps<"img"> | null | undefined,
  /** See below */
  options: CropOptions,


 * Arguments for `smartcrop.js`
 * From:
export interface CropOptions {
   * Minimal scale of the crop rect, set to `1.0` to prevent smaller than necessary crops (lowers the risk of chopping things off).
  minScale?: number;
   * Width of the crop you want to use.
  width: number;
   *  Height of the crop you want to use.
  height: number;
   * Optional array of regions whose 'interestingness' you want to boost
  boost?: CropBoost[];
   * Optional boolean if set to `false` it will turn off the rule of thirds composition weight
  ruleOfThirds?: boolean;
  debug?: boolean;