@billykwok/sqip.macro NPM

sqip.macro

Webpack sqip-loader implemented as babel-plugin-macros

Usage

Similar to nodejs require call:

import sqip from "sqip.macro";

const preview = sqip("./image.jpg");

Example of usage in create-react-app

import sqip from "sqip.macro";

const { d, w, h } = sqip("./cover-image.jpg", {
  numberOfPrimitives: 3, // default is 12
  blur: 5, // default is 0,
  outputMode: 2, // default is 0
  // Explanation:
  // * 0 is Reverse Aspect Ratio Mode: { dataUrl: string, ratio: number }
  // * 1 is Aspect Ratio Mode: { dataUrl: string, ratio: number }
  // * 2 is Dimension Mode: { dataUrl: string, width: number, height: number }
  // * 3 is Direct Mode: output dataUrl directly as a string
  trimOutput: false, // trim "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 " at the beginning and "%3c/svg%3e" at the end because they are the same for every image
});

const SomeComponent = () => (
  <div
    style={{
      backgroundImage: `url(${coversqip}`,
      backgroundSize: "cover",
      backgroundRepeat: "no-repeat",
    }}
  >
    <img src={d} alt="description" width={w} height={h} />
  </div>
);