Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-blurhash

Package Overview
Dependencies
Maintainers
5
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-blurhash - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/esm/index.js

4

CHANGELOG.md
# Changelog
## 0.3.0
- Use `tsup` for bundling
## 0.2.0

@@ -4,0 +8,0 @@

@@ -1,2 +0,43 @@

export { default as Blurhash } from './Blurhash';
export { default as BlurhashCanvas } from './BlurhashCanvas';
import * as React from 'react';
declare type Props$1 = React.HTMLAttributes<HTMLDivElement> & {
hash: string;
/** CSS height, default: 128 */
height?: number | string | 'auto';
punch?: number;
resolutionX?: number;
resolutionY?: number;
style?: React.CSSProperties;
/** CSS width, default: 128 */
width?: number | string | 'auto';
};
declare class Blurhash extends React.PureComponent<Props$1> {
static defaultProps: {
height: number;
width: number;
resolutionX: number;
resolutionY: number;
};
componentDidUpdate(): void;
render(): JSX.Element;
}
declare type Props = React.CanvasHTMLAttributes<HTMLCanvasElement> & {
hash: string;
height?: number;
punch?: number;
width?: number;
};
declare class BlurhashCanvas extends React.PureComponent<Props> {
static defaultProps: {
height: number;
width: number;
};
canvas: HTMLCanvasElement;
componentDidUpdate(): void;
handleRef: (canvas: HTMLCanvasElement) => void;
draw: () => void;
render(): JSX.Element;
}
export { Blurhash, BlurhashCanvas };

11

lib/index.js

@@ -1,11 +0,2 @@

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BlurhashCanvas = exports.Blurhash = void 0;
var Blurhash_1 = require("./Blurhash");
Object.defineProperty(exports, "Blurhash", { enumerable: true, get: function () { return __importDefault(Blurhash_1).default; } });
var BlurhashCanvas_1 = require("./BlurhashCanvas");
Object.defineProperty(exports, "BlurhashCanvas", { enumerable: true, get: function () { return __importDefault(BlurhashCanvas_1).default; } });
"use strict";var D=Object.create;var p=Object.defineProperty,E=Object.defineProperties,H=Object.getOwnPropertyDescriptor,L=Object.getOwnPropertyDescriptors,M=Object.getOwnPropertyNames,g=Object.getOwnPropertySymbols,T=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var x=(t,e,s)=>e in t?p(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,u=(t,e)=>{for(var s in e||(e={}))b.call(e,s)&&x(t,s,e[s]);if(g)for(var s of g(e))P.call(e,s)&&x(t,s,e[s]);return t},l=(t,e)=>E(t,L(e));var f=(t,e)=>{var s={};for(var r in t)b.call(t,r)&&e.indexOf(r)<0&&(s[r]=t[r]);if(t!=null&&g)for(var r of g(t))e.indexOf(r)<0&&P.call(t,r)&&(s[r]=t[r]);return s};var S=(t,e)=>{for(var s in e)p(t,s,{get:e[s],enumerable:!0})},R=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of M(e))!b.call(t,o)&&o!==s&&p(t,o,{get:()=>e[o],enumerable:!(r=H(e,o))||r.enumerable});return t};var C=(t,e,s)=>(s=t!=null?D(T(t)):{},R(e||!t||!t.__esModule?p(s,"default",{value:t,enumerable:!0}):s,t)),X=t=>R(p({},"__esModule",{value:!0}),t);var z={};S(z,{Blurhash:()=>h,BlurhashCanvas:()=>a});module.exports=X(z);var c=C(require("react"));var w=C(require("react")),y=require("blurhash");var a=class extends w.PureComponent{constructor(){super(...arguments);this.canvas=null;this.handleRef=s=>{this.canvas=s,this.draw()};this.draw=()=>{let{hash:s,height:r,punch:o,width:i}=this.props;if(this.canvas){let n=(0,y.decode)(s,i,r,o),d=this.canvas.getContext("2d"),m=d.createImageData(i,r);m.data.set(n),d.putImageData(m,0,0)}}}componentDidUpdate(){this.draw()}render(){let n=this.props,{hash:s,height:r,width:o}=n,i=f(n,["hash","height","width"]);return w.createElement("canvas",l(u({},i),{height:r,width:o,ref:this.handleRef}))}};a.defaultProps={height:128,width:128};var Y={position:"absolute",top:0,bottom:0,left:0,right:0,width:"100%",height:"100%"},h=class extends c.PureComponent{componentDidUpdate(){if(this.props.resolutionX<=0)throw new Error("resolutionX must be larger than zero");if(this.props.resolutionY<=0)throw new Error("resolutionY must be larger than zero")}render(){let v=this.props,{hash:e,height:s,width:r,punch:o,resolutionX:i,resolutionY:n,style:d}=v,m=f(v,["hash","height","width","punch","resolutionX","resolutionY","style"]);return c.createElement("div",l(u({},m),{style:l(u({display:"inline-block",height:s,width:r},d),{position:"relative"})}),c.createElement(a,{hash:e,height:n,width:i,punch:o,style:Y}))}};h.defaultProps={height:128,width:128,resolutionX:32,resolutionY:32};0&&(module.exports={Blurhash,BlurhashCanvas});
//# sourceMappingURL=index.js.map
{
"name": "react-blurhash",
"version": "0.2.0",
"version": "0.3.0",
"description": "Blurhash implementation for React",
"keywords": [
"blurhash",
"blur",
"hash",
"image",
"react",
"component"
],
"keywords": ["blurhash", "blur", "hash", "image", "react", "component"],
"license": "MIT",

@@ -20,11 +13,9 @@ "author": "nygardk",

"homepage": "https://blurha.sh",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"module": "es/index.js",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"module": "dist/esm/index.js",
"scripts": {
"prepublishOnly": "npm run build",
"build": "npm run build:es && npm run build:lib",
"build": "tsup",
"build:demo": "rm -rf ./docs && webpack -p --config webpack.demo.config.js",
"build:es": "rm -rf ./es && npm run ts -- --module es2015 --outDir ./es",
"build:lib": "rm -rf ./lib && npm run ts -- --module commonjs --outDir ./lib --esModuleInterop true",
"demo": "webpack-dev-server --config webpack.demo.config.js --hot --progress",

@@ -53,2 +44,3 @@ "prettier": "prettier src/**/*.ts",

"ts-loader": "8.0.6",
"tsup": "^6.5.0",
"typescript": "4.0.3",

@@ -55,0 +47,0 @@ "webpack": "4.44.2",

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc