react-instagram-embed - npm Package Compare versions

Comparing version 2.0.1 to 3.0.0

es/index.d.ts

 import * as React from 'react';
-export interface Props<T = 'div'> {
-    url: string;
-    clientAccessToken: string;
+import { SetRequired } from 'type-fest';
+interface DefaultProps<T extends React.ElementType = 'div'> {
     hideCaption: boolean;
@@ -9,25 +8,6 @@ containerTagName: T;
     injectScript: boolean;
-    maxWidth?: number;
-    className?: string;
-    onLoading?(): void;
-    onSuccess?(response: Response): void;
-    onAfterRender?(): void;
-    onFailure?(arg: any): void;
 }
 declare type Html = string;
 interface Response {
-    version: string;
-    title: string;
-    author_name: string;
-    author_url: string;
-    author_id: number;
-    media_id: string;
-    provider_name: 'Instagram';
-    provider_url: string;
-    type: string;
-    width: number | null;
-    height: number | null;
     html: Html;
-    thumbnail_width: number;
-    thumbnail_height: number;
 }
@@ -37,14 +17,20 @@ interface State {
 }
-export default class InstagramEmbed extends React.PureComponent<Props, State> {
-    static defaultProps: {
-        hideCaption: boolean;
-        containerTagName: string;
-        protocol: string;
-        injectScript: boolean;
-    };
+declare type PropsInternal = SetRequired<Props, keyof DefaultProps>;
+export interface Props<T extends React.ElementType = 'div'> extends Partial<DefaultProps<T>> {
+    url: string;
+    clientAccessToken: string;
+    maxWidth?: number;
+    className?: string;
+    onLoading?(): void;
+    onSuccess?(response: Response): void;
+    onAfterRender?(): void;
+    onFailure?(error: Error): void;
+}
+export default class InstagramEmbed extends React.Component<PropsInternal, State> {
+    static defaultProps: DefaultProps;
     private request;
     private timer?;
-    constructor(props: Props);
+    constructor(props: PropsInternal);
     componentDidMount(): void;
-    componentDidUpdate(prevProps: Props): void;
+    componentDidUpdate(prevProps: PropsInternal): void;
     componentWillUnmount(): void;
@@ -51,0 +37,0 @@ render(): React.ReactNode;

es/index.js

@@ -62,10 +62,6 @@ var __extends = (this && this.__extends) || (function () {
         };
-        _this.handleFetchFailure = function () {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
+        _this.handleFetchFailure = function (error) {
             clearTimeout(_this.timer);
             if (_this.props.onFailure) {
-                _this.props.onFailure(args);
+                _this.props.onFailure(error);
             }
@@ -76,3 +72,7 @@ };
             request.promise = new Promise(function (resolve, reject) {
-                var promise = fetch(url)
+                var promise = fetch(url, {
+                    headers: {
+                        Authorization: "Bearer " + _this.props.clientAccessToken,
+                    },
+                })
                     .then(function (response) { return response.json(); })
@@ -104,7 +104,9 @@ .then(function (json) { return resolve(json); })
     InstagramEmbed.prototype.componentDidUpdate = function (prevProps) {
-        var _a = this.props, url = _a.url, hideCaption = _a.hideCaption, maxWidth = _a.maxWidth, containerTagName = _a.containerTagName;
+        var _a = this.props, url = _a.url, clientAccessToken = _a.clientAccessToken, hideCaption = _a.hideCaption, maxWidth = _a.maxWidth, containerTagName = _a.containerTagName, className = _a.className;
         if (prevProps.url !== url ||
+            prevProps.clientAccessToken !== clientAccessToken ||
             prevProps.hideCaption !== hideCaption ||
             prevProps.maxWidth !== maxWidth ||
-            prevProps.containerTagName !== containerTagName) {
+            prevProps.containerTagName !== containerTagName ||
+            prevProps.className !== className) {
             this.request.cancel();
@@ -118,4 +120,4 @@ this.fetchEmbed(this.getQueryParams(this.props));
     InstagramEmbed.prototype.render = function () {
-        var Tag = this.props.containerTagName;
-        return React.createElement(Tag, __assign({}, this.omitComponentProps(), { dangerouslySetInnerHTML: { __html: this.state.html || '' } }));
+        var Element = this.props.containerTagName;
+        return React.createElement(Element, __assign({}, this.omitComponentProps(), { dangerouslySetInnerHTML: { __html: this.state.html || '' } }));
     };
@@ -130,3 +132,7 @@ InstagramEmbed.prototype.fetchEmbed = function (queryParams) {
     InstagramEmbed.prototype.omitComponentProps = function () {
-        var _a = this.props, url = _a.url, clientAccessToken = _a.clientAccessToken, hideCaption = _a.hideCaption, maxWidth = _a.maxWidth, containerTagName = _a.containerTagName, onLoading = _a.onLoading, onSuccess = _a.onSuccess, onAfterRender = _a.onAfterRender, onFailure = _a.onFailure, protocol = _a.protocol, injectScript = _a.injectScript, rest = __rest(_a, ["url", "clientAccessToken", "hideCaption", "maxWidth", "containerTagName", "onLoading", "onSuccess", "onAfterRender", "onFailure", "protocol", "injectScript"]);
+        var _a = this.props, 
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        url = _a.url, clientAccessToken = _a.clientAccessToken, hideCaption = _a.hideCaption, maxWidth = _a.maxWidth, containerTagName = _a.containerTagName, onLoading = _a.onLoading, onSuccess = _a.onSuccess, onAfterRender = _a.onAfterRender, onFailure = _a.onFailure, protocol = _a.protocol, injectScript = _a.injectScript, 
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+        rest = __rest(_a, ["url", "clientAccessToken", "hideCaption", "maxWidth", "containerTagName", "onLoading", "onSuccess", "onAfterRender", "onFailure", "protocol", "injectScript"]);
         return rest;
@@ -162,10 +168,14 @@ };
     InstagramEmbed.prototype.getQueryParams = function (_a) {
-        var url = _a.url, clientAccessToken = _a.clientAccessToken, hideCaption = _a.hideCaption, maxWidth = _a.maxWidth;
-        return stringify({
+        var url = _a.url, hideCaption = _a.hideCaption, maxWidth = _a.maxWidth;
+        var query = {
             url: url,
-            access_token: clientAccessToken,
             hidecaption: hideCaption,
-            maxwidth: typeof maxWidth === 'number' && maxWidth >= 320 ? maxWidth : undefined,
-            omitscript: true
-        });
+            omitscript: true,
+            fields: 'html',
+        };
+        // "The request parameter 'maxwidth' must be an integer between 320 and 658."
+        if (typeof maxWidth === 'number' && 320 <= maxWidth && maxWidth <= 658) {
+            query.maxwidth = maxWidth;
+        }
+        return stringify(query);
     };
@@ -176,6 +186,6 @@ InstagramEmbed.defaultProps = {
         protocol: 'https:',
-        injectScript: true
+        injectScript: true,
     };
     return InstagramEmbed;
-}(React.PureComponent));
+}(React.Component));
 export default InstagramEmbed;

lib/index.d.ts

 import * as React from 'react';
-export interface Props<T = 'div'> {
-    url: string;
-    clientAccessToken: string;
+import { SetRequired } from 'type-fest';
+interface DefaultProps<T extends React.ElementType = 'div'> {
     hideCaption: boolean;
@@ -9,25 +8,6 @@ containerTagName: T;
     injectScript: boolean;
-    maxWidth?: number;
-    className?: string;
-    onLoading?(): void;
-    onSuccess?(response: Response): void;
-    onAfterRender?(): void;
-    onFailure?(arg: any): void;
 }
 declare type Html = string;
 interface Response {
-    version: string;
-    title: string;
-    author_name: string;
-    author_url: string;
-    author_id: number;
-    media_id: string;
-    provider_name: 'Instagram';
-    provider_url: string;
-    type: string;
-    width: number | null;
-    height: number | null;
     html: Html;
-    thumbnail_width: number;
-    thumbnail_height: number;
 }
@@ -37,14 +17,20 @@ interface State {
 }
-export default class InstagramEmbed extends React.PureComponent<Props, State> {
-    static defaultProps: {
-        hideCaption: boolean;
-        containerTagName: string;
-        protocol: string;
-        injectScript: boolean;
-    };
+declare type PropsInternal = SetRequired<Props, keyof DefaultProps>;
+export interface Props<T extends React.ElementType = 'div'> extends Partial<DefaultProps<T>> {
+    url: string;
+    clientAccessToken: string;
+    maxWidth?: number;
+    className?: string;
+    onLoading?(): void;
+    onSuccess?(response: Response): void;
+    onAfterRender?(): void;
+    onFailure?(error: Error): void;
+}
+export default class InstagramEmbed extends React.Component<PropsInternal, State> {
+    static defaultProps: DefaultProps;
     private request;
     private timer?;
-    constructor(props: Props);
+    constructor(props: PropsInternal);
     componentDidMount(): void;
-    componentDidUpdate(prevProps: Props): void;
+    componentDidUpdate(prevProps: PropsInternal): void;
     componentWillUnmount(): void;
@@ -51,0 +37,0 @@ render(): React.ReactNode;

lib/index.js

@@ -83,10 +83,6 @@ "use strict";
         };
-        _this.handleFetchFailure = function () {
-            var args = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                args[_i] = arguments[_i];
-            }
+        _this.handleFetchFailure = function (error) {
             clearTimeout(_this.timer);
             if (_this.props.onFailure) {
-                _this.props.onFailure(args);
+                _this.props.onFailure(error);
             }
@@ -97,3 +93,7 @@ };
             request.promise = new Promise(function (resolve, reject) {
-                var promise = fetch(url)
+                var promise = fetch(url, {
+                    headers: {
+                        Authorization: "Bearer " + _this.props.clientAccessToken,
+                    },
+                })
                     .then(function (response) { return response.json(); })
@@ -125,7 +125,9 @@ .then(function (json) { return resolve(json); })
     InstagramEmbed.prototype.componentDidUpdate = function (prevProps) {
-        var _a = this.props, url = _a.url, hideCaption = _a.hideCaption, maxWidth = _a.maxWidth, containerTagName = _a.containerTagName;
+        var _a = this.props, url = _a.url, clientAccessToken = _a.clientAccessToken, hideCaption = _a.hideCaption, maxWidth = _a.maxWidth, containerTagName = _a.containerTagName, className = _a.className;
         if (prevProps.url !== url ||
+            prevProps.clientAccessToken !== clientAccessToken ||
             prevProps.hideCaption !== hideCaption ||
             prevProps.maxWidth !== maxWidth ||
-            prevProps.containerTagName !== containerTagName) {
+            prevProps.containerTagName !== containerTagName ||
+            prevProps.className !== className) {
             this.request.cancel();
@@ -139,4 +141,4 @@ this.fetchEmbed(this.getQueryParams(this.props));
     InstagramEmbed.prototype.render = function () {
-        var Tag = this.props.containerTagName;
-        return React.createElement(Tag, __assign({}, this.omitComponentProps(), { dangerouslySetInnerHTML: { __html: this.state.html || '' } }));
+        var Element = this.props.containerTagName;
+        return React.createElement(Element, __assign({}, this.omitComponentProps(), { dangerouslySetInnerHTML: { __html: this.state.html || '' } }));
     };
@@ -151,3 +153,7 @@ InstagramEmbed.prototype.fetchEmbed = function (queryParams) {
     InstagramEmbed.prototype.omitComponentProps = function () {
-        var _a = this.props, url = _a.url, clientAccessToken = _a.clientAccessToken, hideCaption = _a.hideCaption, maxWidth = _a.maxWidth, containerTagName = _a.containerTagName, onLoading = _a.onLoading, onSuccess = _a.onSuccess, onAfterRender = _a.onAfterRender, onFailure = _a.onFailure, protocol = _a.protocol, injectScript = _a.injectScript, rest = __rest(_a, ["url", "clientAccessToken", "hideCaption", "maxWidth", "containerTagName", "onLoading", "onSuccess", "onAfterRender", "onFailure", "protocol", "injectScript"]);
+        var _a = this.props, 
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        url = _a.url, clientAccessToken = _a.clientAccessToken, hideCaption = _a.hideCaption, maxWidth = _a.maxWidth, containerTagName = _a.containerTagName, onLoading = _a.onLoading, onSuccess = _a.onSuccess, onAfterRender = _a.onAfterRender, onFailure = _a.onFailure, protocol = _a.protocol, injectScript = _a.injectScript, 
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+        rest = __rest(_a, ["url", "clientAccessToken", "hideCaption", "maxWidth", "containerTagName", "onLoading", "onSuccess", "onAfterRender", "onFailure", "protocol", "injectScript"]);
         return rest;
@@ -183,10 +189,14 @@ };
     InstagramEmbed.prototype.getQueryParams = function (_a) {
-        var url = _a.url, clientAccessToken = _a.clientAccessToken, hideCaption = _a.hideCaption, maxWidth = _a.maxWidth;
-        return querystring_1.stringify({
+        var url = _a.url, hideCaption = _a.hideCaption, maxWidth = _a.maxWidth;
+        var query = {
             url: url,
-            access_token: clientAccessToken,
             hidecaption: hideCaption,
-            maxwidth: typeof maxWidth === 'number' && maxWidth >= 320 ? maxWidth : undefined,
-            omitscript: true
-        });
+            omitscript: true,
+            fields: 'html',
+        };
+        // "The request parameter 'maxwidth' must be an integer between 320 and 658."
+        if (typeof maxWidth === 'number' && 320 <= maxWidth && maxWidth <= 658) {
+            query.maxwidth = maxWidth;
+        }
+        return querystring_1.stringify(query);
     };
@@ -197,6 +207,6 @@ InstagramEmbed.defaultProps = {
         protocol: 'https:',
-        injectScript: true
+        injectScript: true,
     };
     return InstagramEmbed;
-}(React.PureComponent));
+}(React.Component));
 exports.default = InstagramEmbed;

package.json

 {
   "name": "react-instagram-embed",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "React embedding Instagram posts component",
@@ -20,7 +20,7 @@ "main": "lib/index.js",
     "lint-staged": "lint-staged",
-    "lint:eslint": "eslint '**/*.{ts,js}'",
-    "fix:eslint": "npm run lint:eslint --fix",
-    "_prettier": "prettier '**/*.{ts,js}'",
-    "lint:prettier": "npm run _prettier --check",
-    "fix:prettier": "npm run _prettier --write",
+    "lint:eslint": "eslint '**/*.{ts,tsx,js}'",
+    "fix:eslint": "npm run lint:eslint -- --fix",
+    "_prettier": "prettier '**/*.{ts,tsx,js}'",
+    "lint:prettier": "npm run _prettier -- --check",
+    "fix:prettier": "npm run _prettier -- --write",
     "typecheck": "tsc --noEmit",
@@ -50,15 +50,2 @@ "dev": "webpack serve --config webpack.config.dev.ts",
   "homepage": "https://github.com/sugarshin/react-instagram-embed#readme",
-  "ava": {
-    "require": [
-      "@babel/register",
-      "raf/polyfill",
-      "./test/helpers/setup-browser-env.js"
-    ]
-  },
-  "nyc": {
-    "all": true,
-    "include": [
-      "src/**/*.js"
-    ]
-  },
   "peerDependencies": {
@@ -74,2 +61,3 @@ "react": "^17.0.0 || ^16.0.0 || ^15.0.0 || ~0.14.0",
     "@babel/preset-typescript": "7.14.5",
+    "@hot-loader/react-dom": "17.0.1",
     "@types/dotenv-webpack": "7.0.3",
@@ -82,2 +70,3 @@ "@types/jest": "26.0.24",
     "@types/webpack": "5.28.0",
+    "@types/webpack-dev-server": "3.11.5",
     "@typescript-eslint/eslint-plugin": "4.28.2",
@@ -110,3 +99,6 @@ "@typescript-eslint/parser": "4.28.2",
     "webpack-dev-server": "3.11.2"
+  },
+  "dependencies": {
+    "type-fest": "^1.2.2"
   }
 }

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

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

24907

increased by1.91%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

41

increased by5.13%

Lines of code

483

decreased by-1.63%

Dependency changes

• + Addedtype-fest@^1.2.2

• + Addedtype-fest@1.4.0(transitive)