@assetcrush/reactjs-sdk v0.1.5

assetcrush

A simple reactjs library to resize image on fly.

What is assetcrush ?

assetcrush is an image resize service for on the fly dynamic resize. If your users are uploading images of various sizes and then you are consuming those images on different devices then this service is ideal for your use. Since every device has different dimensions our sdk will make sure to get the rightly resized image for you via assetcrush resize service.

Installation

npm i -S @assetcrush/reactjs-sdk

or with yarn

yarn add @assetcrush/reactjs-sdk

Usage

setKey

Place this in your index.js file, this needs to be loaded once at initialization. Get your key by signing up on console.assetcrush.com

import { setKey } from "@assetcrush/reactjs-sdk";

setKey("test-key");

ImageCrush

Basic usage of Imagecrush pass width, height and url and let the magic happens.

import React from "react";
import { ImageCrush } from "@assetcrush/reactjs-sdk";

const testUrl =
  "https://cdn.pixabay.com/photo/2021/12/11/07/59/hotel-6862159__340.jpg";

function App() {
  return (
    <div style={{ width: 50, height: 50 }}>
      <ImageCrush url={testUrl} width={50} height={50} />
    </div>
  );
}

export default App;

Props

Any additional props are passed down to underlying <img /> element.

ImageCrushAdoptive

Its the more adoptive method to use you don't need to pass width and height it will inherit width and height from outermost wrapped div

import React from "react";
import { ImageCrushAdoptive } from "@assetcrush/reactjs-sdk";

const testUrl =
  "https://cdn.pixabay.com/photo/2021/12/11/07/59/hotel-6862159__340.jpg";

function App() {
  return (
    <div style={{ width: 50, height: 50 }}>
      <ImageCrushAdoptive url={testUrl} />
    </div>
  );
}

export default App;

Props

Any additional props are passed down to underlying <img /> component.

Run example

git clone https://github.com/assetcrush/reactjs-sdk.git
cd reactjs-sdk/example
yarn install # or npm install


export default App;

to run with npm

npm start

to run with yarn

yarn start

Testing with Jest

Make sure to add jest.useFakeTimers(); to your test file. See Stackoverflow post and jest timer mocks

Seeing issues or any feedback or feature suggest ?

Create an issue with github.