patw0929 / react-smartbanner Goto Github PK
View Code? Open in Web Editor NEWRewrite Smart App Banner in React.js.
Home Page: https://patw0929.github.io/react-smartbanner/
License: MIT License
Rewrite Smart App Banner in React.js.
Home Page: https://patw0929.github.io/react-smartbanner/
License: MIT License
In React 16.3 aliases for the unsafe lifecycles were introduced and now as of React >16.8 we receive warnings each time one of these APIs are used.
Renaming them to their UNSAFE_*
counterparts will resolve the warnings.
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
I get this error just after updating the package to version 5.1.2!
(function (exports, require, module, __filename, __dirname) { !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):"object"==typeof exports?exports.SmartBanner=t(require("react"),require("prop-types")):e.SmartBanner=t(e.React,e.PropTypes)}(window,function(i,n){return function(i){var n={};function o(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return i[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=i,o.c=n,o.d=function(e,t,i){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);i
ReferenceError: window is not defined
at Object.<anonymous> (/home/node/node_modules/react-smartbanner/dist/main.js:1:319)
at Module._compile (module.js:652:30)
at Module._extensions..js (module.js:663:10)
at Object.require.extensions.(anonymous function) [as .js] (/home/node/node_modules/babel-register/lib/node.js:152:7)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/home/node/client/index.js:5:1)
at Module._compile (module.js:652:30)
at loader (/home/node/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/home/node/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
More to mention, I'm running a server-side rendering project.
Is this possible??
Steps to reproduce:
add a position:fixed;top:0;z-index:1000 navigation bar to the page layout (very popular with mobile design)
What happens: the react-smartbanner hides below the navbar instead of pushing it down
What should happen: the react-smartbanner should push the navbar down
The code doesn't seem to work on iOS Safari browsers. I am not that conversant with React, so please excuse me if I am making any obvious mistakes. The code is pretty much the example given in the readme. Also, the code works fine on iOS Chrome browser. It doesn't work on Safari. Any thoughts?
Also, what is the right way to pass the'force' property? I tried the following and it throws a type error.
force={'(android,ios)'}
This package has not been upgraded for a long time. We need to add a smart banner on our NextJS website. Does it support React 18 or are you planning to upgrade the package in the future?
Warning: Failed prop type: Calling PropTypes validators directly is not supported by the prop-types
package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types
"react": "15.3.1",
"react-dom": "15.3.1",
"react-smartbanner": "^3.0.0",
It looks like the dist files didn't get properly generated for v5.0.0. The dist/main.js
file shows the old this.props.url
and main.css isn't being generated at all.
Double checked clearing both npm & yarn cache and nuked node modules each time.
By clicking on the VIEW button, it redirects to a link that does not work.
Generated link: https://itunes.apple.com/19/app/id284882215
I share images
When I try to view the banner when in device mode in chrome devtools, and using an IOS device setting, the banner does not show up. It also doesn't show on actual devices either.
I have seen this on the demo page too for this repo. Any ideas how to get it to work?
This checks for iOS 6+, but doesn't check for Safari vs Chrome. So the banner is correctly hidden on newer versions of Safari (in favor of native banners), but I believe Chrome will also be hidden, right? Chrome doesn't support native app banners.
The package ua-parser-js before 0.7.22 are vulnerable to Regular Expression Denial of Service (ReDoS) via regex
Hello!
Nowadays when Smartbanner is clicked, it sets a cookie and hide itself until cookie expires or is deleted.
I would add new props hideOnclick
with default value true
.
Is it worth to send a PR?
Hello developers, I want to add some custom stylesheets. So How can I work on custom style?
I need some help urgently.
I really appreciate any help you can provide.
Hey, I can't develop on your repo. When I do npm install
it shows me No matching version found for webpack@beta
. Solved this by setting webpack to 3.10.0
.
When I want to commit it shows me ./node_modules/pre-commit/hook: line 49: : command not found
.
Can we add callbacks to the user actions (clicking the close/install button)? This allows developers to do something more on their side (e.g. track user actions).
I can send a pr for this
iOS shows both the native Safari smart banner and react-smartbanner. Not sure of the solution yet but an idea would be to remove the dependency of the meta tags.
https://github.com/patw0929/react-smartbanner/blob/master/src/components/SmartBanner.js#L27 references window.navigator.language
, which is undefined
in IE 10. This causes an uncaught exception and breaks our app.
Is there any plan to add a support for typescript? Thanks!
Hello!
Based on #6, i had the same issue(window is not defined). I would like to know if have you plans to do SSR. I would like do prepare some PR. Could be a good idea?
I am getting this in the output
<!-- react-empty: 42 -->
Even if I use force for type of devices -
<SmartBanner title={'Facebook'} force={'android'} />
The url for the Apple App Store is NOT https://itunes.apple.com/LANGUAGE_CODE/app/id
, it's https://itunes.apple.com/COUNTRY_CODE/app/id
.
That means when the browsers language is English the link to the App Store will be https://itunes.apple.com/en/app/id
but it should be https://itunes.apple.com/us/app/id
, https://itunes.apple.com/gb/app/id
or any other country code.
(function (exports, require, module, __filename, __dirname) { !function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.SmartBanner=n(require("react")):e.SmartBanner=n(e.React)}(this,function(e){return function(e){function n(r){if(t[r])return t[r].exports;var i=t[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,n),i.loaded=!0,i.exports}var t={};return n.m=e,n.c=t,n.p="./",n(0)}([function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function o(e,n){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!n||"object"!=typeof n&&"function"!=typeof n?e:n}function s(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("S
ReferenceError: window is not defined
I'm getting this error after importing the package into my project. I'm using webpack btw, appreciate if you could help. Thanks.
This module works great on iOS and android however, when a user clicks the link using Silk on their kindle they are directed to the google playstore.
We have added the <meta name="kindle-fire-app" content="app-id=B00JMRGQHI">
tag that worked on our old app using the jquery based library. Is there a specific prop I need to add to make this work with the Amazon store?
Safari has a built in feature that reads the same format meta tag and shows the smart banner. This causes the web to show two banners
It seems like NPM 2.0.0 package does not have dist
folder - http://take.ms/6lEl2, and referenced file from main
property of package.json
is not found.
I want to show a different app in the banner depending on the country the user is in. Since it is not possible for me to do this in the backend I have to change the meta tags with JavaScript.
This makes it impossible to use the native iOS banner but since your component ignores newer iOS versions I get no banner at all.
It would be nice if we had an option to allow the banner on newer iOS versions for use cases like mine.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.