@assetcrush/reactjs-sdk

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

Prop	Type	Required	Note
url	string	yes	image url
width	string	no	width of image
height	string	no	height of image
animated	bool	no	image fade in effect
reloadIconColor	string	no	color of reload icon if image fails
spinnerIcon	string	no	spinner component icon while image loads
spinnerColor	string	no	color of spinner
hideSpinner	bool	no	render spinner while image loads or not
onError	func	no	if image fails to load (returns error details)
onLoad	func	no	if image loads successfully (returns image headers)

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

Prop	Type	Required	Note
backgroundColor	string	no	color of background layer of image
debounce	number	no	image layout handler debounce
wrapperStyle	object	no	style object for outermost div
url	string	yes	image url
width	string	no	width of image
height	string	no	height of image
animated	bool	no	image fade in effect
reloadIconColor	string	no	color of reload icon if image fails
spinnerIcon	string	no	spinner component icon while image loads
spinnerColor	string	no	color of spinner
hideSpinner	bool	no	render spinner while image loads or not
onError	func	no	if image fails to load (returns error details)
onLoad	func	no	if image loads successfully (returns image headers)
headers	object	no	Custom headers for image

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.