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

@ashwamegh/react-link-preview

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ashwamegh/react-link-preview - npm Package Compare versions

Comparing version 0.3.0 to 1.0.0

14

dist/index.js

@@ -40,4 +40,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

onClick = props.onClick,
render = props.render;
var api = 'https://lpdg.up.railway.app/parse/link';
render = props.render,
customDomain = props.customDomain;
var style = {

@@ -61,3 +61,3 @@ width: width,

setLoading(true);
return Promise.resolve(fetch(api, {
return Promise.resolve(fetch(customDomain, {
method: 'POST',

@@ -145,5 +145,6 @@ headers: {

marginRight: 'auto',
marginLeft: 'auto'
marginLeft: 'auto',
customDomain: 'https://lpdg-server.azurewebsites.net/parse/link'
};
LinkPreview.propTyps = {
LinkPreview.propType = {
url: isValidUrlProp,

@@ -157,3 +158,4 @@ onClick: PropTypes.func,

marginRight: PropTypes.string,
marginLeft: PropTypes.string
marginLeft: PropTypes.string,
customDomain: PropTypes.string
};

@@ -160,0 +162,0 @@

@@ -37,4 +37,4 @@ import React, { useState, useEffect } from 'react';

onClick = props.onClick,
render = props.render;
var api = 'https://lpdg.up.railway.app/parse/link';
render = props.render,
customDomain = props.customDomain;
var style = {

@@ -58,3 +58,3 @@ width: width,

setLoading(true);
return Promise.resolve(fetch(api, {
return Promise.resolve(fetch(customDomain, {
method: 'POST',

@@ -142,5 +142,6 @@ headers: {

marginRight: 'auto',
marginLeft: 'auto'
marginLeft: 'auto',
customDomain: 'https://lpdg-server.azurewebsites.net/parse/link'
};
LinkPreview.propTyps = {
LinkPreview.propType = {
url: isValidUrlProp,

@@ -154,3 +155,4 @@ onClick: PropTypes.func,

marginRight: PropTypes.string,
marginLeft: PropTypes.string
marginLeft: PropTypes.string,
customDomain: PropTypes.string
};

@@ -157,0 +159,0 @@

{
"name": "@ashwamegh/react-link-preview",
"version": "0.3.0",
"version": "1.0.0",
"private": false,

@@ -28,3 +28,3 @@ "description": "A component package which helps you render the preview of any link",

"type": "git",
"url": "git://github.com/ashwamegh/react-link-preview"
"url": "git://github.com/ashwamegh/react-link-preview.git"
},

@@ -44,4 +44,4 @@ "homepage": "https://github.com/ashwamegh/react-link-preview#readme",

"peerDependencies": {
"prop-types": "^15.5.4",
"react": "^16.8.0"
"prop-types": "^15.8.1",
"react": "^18.2.0"
},

@@ -51,24 +51,25 @@ "devDependencies": {

"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-config-standard": "^17.1.0",
"eslint-config-standard-react": "^13.0.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"microbundle-crl": "^0.13.10",
"eslint-plugin-prettier": "^5.1.1",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-standard": "^5.0.0",
"gh-pages": "^6.1.1",
"microbundle-crl": "^0.13.11",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1"
"prettier": "^3.1.1",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1"
},
"files": [
"dist"
]
],
"dependencies": {}
}

@@ -16,2 +16,4 @@ <p align="left">

> **<ins>NOTE: This utilizes https://github.com/ashwamegh/link-preview-generator-server server deployed on Azure, a free web server which can run 30 minutes in a day.</ins> If you want to use it in a PRODUCTION app, I would recommend you to use your own server (You can use the [`Dockerfile`](https://github.com/ashwamegh/link-preview-generator-server/blob/master/Dockerfile) or the [Docker hub image](https://hub.docker.com/repository/docker/ashwamegh/lpdg-server) for deploying [link-preview-generator-server](https://github.com/ashwamegh/link-preview-generator-server)) and provide the custom link of the API for `customDomain` in the Component Props**
## Demo

@@ -83,3 +85,9 @@

function App() {
return <LinkPreview url='https://reactjs.org' render={CustomComponent} />
return (
<LinkPreview
url='https://reactjs.org'
customDomain='https://lpdg-server.azurewebsites.net/parse/link'
render={CustomComponent}
/>
)
}

@@ -92,13 +100,14 @@

| Property | Type | Default | Description | Required |
| -------------- | ---------- | ------- | ------------------------------------------------------------------------- | -------- |
| `url` | `string` | | URL to get preview data | true |
| `onClick` | `function` | | onClick handler for the card | false |
| `render` | `function` | | function which can be called with preview data to render custom component | false |
| `width` | `string` | `90%` | Width of the card preview | false |
| `maxWidth` | `string` | `700px` | Max Width of the card preview | false |
| `marginTop` | `string` | `18px` | Margin top for the card | false |
| `marginBottom` | `string` | `18px` | Margin bottom for the card | false |
| `marginRight` | `string` | `auto` | Margin right for the card | false |
| `marginLeft` | `string` | `auto` | Margin left for the card | false |
| Property | Type | Default | Description | Required |
| -------------- | ---------- | -------------------------------------------------- | ------------------------------------------------------------------------- | -------- |
| `url` | `string` | | URL to get preview data | true |
| `onClick` | `function` | | onClick handler for the card | false |
| `customDomain` | `string` | `https://lpdg-server.azurewebsites.net/parse/link` | Custom Server API link which can parse the metadata of the page | false |
| `render` | `function` | | function which can be called with preview data to render custom component | false |
| `width` | `string` | `90%` | Width of the card preview | false |
| `maxWidth` | `string` | `700px` | Max Width of the card preview | false |
| `marginTop` | `string` | `18px` | Margin top for the card | false |
| `marginBottom` | `string` | `18px` | Margin bottom for the card | false |
| `marginRight` | `string` | `auto` | Margin right for the card | false |
| `marginLeft` | `string` | `auto` | Margin left for the card | false |

@@ -105,0 +114,0 @@ ## Contribute

Sorry, the diff of this file is not supported yet

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