This is the React Hook version of jwagner/smartcrop.js + lokesh/color-thief with Typescript support.
We made this hook for Flyyer.io to enable developers to create content-aware marketing and social images but it is useful for any kind of project.
Install this dependency:
yarn add use-smartcropBy 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 = "https://images.pexels.com/photos/1496286/pexels-photo-1496286.jpeg";
// Width and height are required.
const [cropped, error] = useSmartcrop({ src }, { width: 200, height: 400, minScale: 1.0 });
if (error) {
console.error(error);
}
return (
<div>
{cropped && <img src={cropped} />}
</div>
);
}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: https://github.com/jwagner/smartcrop.js
*/
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;
}