Brettm12345 / thumbor-gatsby-image

A typescript client for using thumbor urls in gatsby-image using react hooks

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Thumbor TS Gatsby Image

Auto convert thumbor-ts instances into gatsby-image compatible objects

Usage

import React, { FC } from "react";
import Img from "gatsby-image";
import { useFixed } from "thumbor-ts-gatsby-image";
import { Thumbor } from "thumbor-ts";

// Your encryption key is not required, but your link will be unsafe.
const thumbor = Thumbor({
  serverUrl: "http://myserver.thumbor.com",
  securityKey: "MY_KEY"
});

const image = thumbor.setImagePath("00223lsvrnzeaf42.png").smartCrop(true);

const Img: FC = () => {
  const fixed = useFixed(image, { width: 200, height: 300 });
  return <Img fixed={fixed} />;
};

About

A typescript client for using thumbor urls in gatsby-image using react hooks


Languages

Language:TypeScript 100.0%