react-blurhash - npm Package Compare versions

Comparing version 0.1.0-alpha.1 to 0.1.0

es/Blurhash.js

@@ -38,2 +38,11 @@ var __extends = (this && this.__extends) || (function () {
 import BlurhashCanvas from './BlurhashCanvas';
+var canvasStyle = {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: '100%',
+    height: '100%',
+};
 var Blurhash = /** @class */ (function (_super) {
@@ -54,12 +63,4 @@ __extends(Blurhash, _super);
         var _a = this.props, hash = _a.hash, height = _a.height, width = _a.width, punch = _a.punch, resolutionX = _a.resolutionX, resolutionY = _a.resolutionY, style = _a.style, rest = __rest(_a, ["hash", "height", "width", "punch", "resolutionX", "resolutionY", "style"]);
-        return (React.createElement("div", __assign({}, rest, { style: __assign({}, style, { height: height, width: width, position: 'relative' }) }),
-            React.createElement(BlurhashCanvas, { hash: hash, height: resolutionY, width: resolutionX, punch: punch, style: {
-                    position: 'absolute',
-                    top: 0,
-                    bottom: 0,
-                    left: 0,
-                    right: 0,
-                    width: '100%',
-                    height: '100%',
-                } })));
+        return (React.createElement("div", __assign({}, rest, { style: __assign({ display: 'inline-block' }, style, { height: height, width: width, position: 'relative' }) }),
+            React.createElement(BlurhashCanvas, { hash: hash, height: resolutionY, width: resolutionX, punch: punch, style: canvasStyle })));
     };
@@ -66,0 +67,0 @@ Blurhash.defaultProps = {

lib/Blurhash.js

@@ -40,2 +40,11 @@ "use strict";
 var BlurhashCanvas_1 = require("./BlurhashCanvas");
+var canvasStyle = {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: '100%',
+    height: '100%',
+};
 var Blurhash = /** @class */ (function (_super) {
@@ -56,12 +65,4 @@ __extends(Blurhash, _super);
         var _a = this.props, hash = _a.hash, height = _a.height, width = _a.width, punch = _a.punch, resolutionX = _a.resolutionX, resolutionY = _a.resolutionY, style = _a.style, rest = __rest(_a, ["hash", "height", "width", "punch", "resolutionX", "resolutionY", "style"]);
-        return (react_1.default.createElement("div", __assign({}, rest, { style: __assign({}, style, { height: height, width: width, position: 'relative' }) }),
-            react_1.default.createElement(BlurhashCanvas_1.default, { hash: hash, height: resolutionY, width: resolutionX, punch: punch, style: {
-                    position: 'absolute',
-                    top: 0,
-                    bottom: 0,
-                    left: 0,
-                    right: 0,
-                    width: '100%',
-                    height: '100%',
-                } })));
+        return (react_1.default.createElement("div", __assign({}, rest, { style: __assign({ display: 'inline-block' }, style, { height: height, width: width, position: 'relative' }) }),
+            react_1.default.createElement(BlurhashCanvas_1.default, { hash: hash, height: resolutionY, width: resolutionX, punch: punch, style: canvasStyle })));
     };
@@ -68,0 +69,0 @@ Blurhash.defaultProps = {

package.json

 {
   "name": "react-blurhash",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0",
   "description": "Blurhash implementation for React",
@@ -19,2 +19,3 @@ "keywords": ["blurhash", "blur", "hash", "image", "react", "component"],
     "build": "npm run build:es && npm run build:lib",
+    "build:demo": "rm -rf ./docs && webpack -p --config webpack.demo.config.js",
     "build:es": "rm -rf ./es   && npm run ts -- --module es2015   --outDir ./es",
@@ -21,0 +22,0 @@ "build:lib": "rm -rf ./lib && npm run ts -- --module commonjs --outDir ./lib",

README.md

 # react-blurhash
 
-> React component for using the [blurhash algorithm](https://blurha.sh)
+[![NPM Version](https://img.shields.io/npm/v/react-blurhash.svg?style=flat)](https://www.npmjs.com/package/react-blurhash)
+[![NPM Downloads](https://img.shields.io/npm/dm/react-blurhash.svg?style=flat)](https://npmcharts.com/compare/react-blurhash?minimal=true)
 
+> React components for using the [blurhash algorithm](https://blurha.sh) in your React projects
+
+[Demo](https://woltapp.github.io/react-blurhash/)
+
 ## Install
 
 ```sh
-npm install --save react-blurhash
+npm install --save blurhash react-blurhash
 ```
 
+## Usage
+
+### `<Blurhash />`
+
+```js
+import { Blurhash } from "react-blurhash";
+```
+
+### Description
+
+`Blurhash` component is the recommended way to render blurashes in your React projects.
+It uses `BlurhashCanvas` and a wrapping `div` to scale the decoded image to your desired size. You may control the quality of the decoded image with `resolutionX` and `resolutionY` props.
+
+#### Props
+
+| name                | description                                                                                                                                                                  |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `hash` (string)     | The encoded blurhash string.                                                                                                                                                 |
+| `width` (int)       | Width of the decoded image.                                                                                                                                                  |
+| `height` (int)      | Height of the decoded image.                                                                                                                                                 |
+| `resolutionX` (int) | The X-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance. (Default: 32) |
+| `resolutionY` (int) | The Y-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance. (Default: 32) |
+|                     |
+| `punch` (int)       | Controls the "punch" value (~contrast) of the blurhash decoding algorithm. (Default: 1)                                                                                      |
+
+#### Example
+
+```jsx
+<Blurhash
+  hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj"
+  width={400}
+  height={300}
+  resolutionX={32}
+  resolutionY={32}
+  punch={1}
+/>
+```
+
+### `<BlurhashCanvas />`
+
+```js
+import { BlurhashCanvas } from "react-blurhash";
+```
+
+### Description
+
+`BlurhashCanvas` is the barebones implementation of a blurhash string to a canvas. You may want to use it instead of the `Blurhash` component e.g. if you want to control the scaling yourself.
+
+#### Props
+
+| name            | description                                                                             |
+| --------------- | --------------------------------------------------------------------------------------- |
+| `hash` (string) | The encoded blurhash string.                                                            |
+| `width` (int)   | Width of the decoded image.                                                             |
+| `height` (int)  | Height of the decoded image.                                                            |
+| `punch` (int)   | Controls the "punch" value (~contrast) of the blurhash decoding algorithm. (Default: 1) |
+
+#### Example
+
+```jsx
+<BlurhashCanvas hash="LEHV6nWB2yk8pyo0adR*.7kCMdnj" width={400} height={300} punch={1} />
+```
+
 ## Browser support
 
 Blurhash depends on `Uint8ClampedArray`, which is supported on all mainstream browsers and >=IE11.

webpack.demo.config.js

@@ -10,2 +10,6 @@ const path = require('path');
   },
+  output: {
+    path: path.resolve(__dirname, 'docs'),
+    filename: 'demo.[hash].js',
+  },
   devtool: 'inline-source-map',
@@ -12,0 +16,0 @@ module: {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

936431

increased by2838.74%

Number of package files

27

increased by8%

Lines of code

1232

increased by185.85%

Number of lines in readme file

82

increased by485.71%

Worsened metrics

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes