i try to add readspeaker webreader to my project in React. Working but only when push to edit options and pulse button play. When he read options and close, play again in webapp page and read OK. I send email to support im waiting for reply and adding the solution here...
For websites that heavily use JS to build the website client-side, the solution is to add general: { usePost: true }. That will send the whole loaded website in base64 to Readspeaker servers instead of just sending the URL that needs to be read.
Example:
public/index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
</head>
<body>
<noscript>
You Need JS
</noscript>
<div id="root"></div>
<script>
window.rsConf = {
params: `//cdn1.readspeaker.com/script/${ID_CUSTOMER}/webReader/webReader.js?pids=wr`,
general: { usePost: true }
};
</script>
</body>
</html>
important: window.rsConf
Component .jsx
import React, { useEffect } from "react";
import { Container } from "reactstrap";
const ReadSpeakerReader = () => {
useEffect(() => {
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src=`//cdn1.readspeaker.com/script/${ID_USER}/webReader/webReader.js`;
oHead.appendChild(oScript);
}, [])
return (
<React.Fragment>
<section className="readspeaker-button-section mt-3 mb-2">
<Container>
<div id="readspeaker_button1" className="rs_skip rsbtn">
<a rel="nofollow"
className="rsbtn_play"
accessKey="L"
title="Escucha esta página utilizando ReadSpeaker webReader"
href={`//app-na.readspeaker.com/cgi-bin/rsent?customerid=${ID_CUSTOMER}&lang=es_co&readid=main-content-privateBCI&url=${encodeURIComponent( document.location.href )}`}
>
<span className="rsbtn_left rsimg rspart">
<span className="rsbtn_text">
<span>Escuchar</span>
</span>
</span>
<span className="rsbtn_right rsimg rsplay rspart"></span>
</a>
</div>
</Container>
</section>
</React.Fragment>
)
}
export default ReadSpeakerReader
With this your readspeaker webreader working well when your component is mounted in DOM
Related
Please I am trying to run react app using external CDN, and having issues on the html file saying:
Uncaught ReferenceError: require is not defined index.html:3
This is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="styles/style.css">
<script src='https://unpkg.com/react#16.3.1/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom#16.3.1/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/react-router-dom#5.0.0/umd/react-router-dom.min.js'></script>
<script src='https://unpkg.com/babel-standalone#6.26.0/babel.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
import Todo from 'component/Todo.js';
const App = () =>(
<div>
<h1>My Todos</h1>
<Todo />
</div>
)
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
</body>
</html>
And this the JavaScript code
function Todo (){
return (<div className="card">
<h2>TITLE</h2>
<div className="actions">
<button className="btn">Delete</button>
</div>
</div>);
}
export default Todo;
you can import external scripts from another server like this :
componentDidMount() {
const script = document.createElement("script");
script.src = "/static/libs/your_script.js";
script.async = true;
script.onload = () => this.scriptLoaded();
document.body.appendChild(script);
}
Then to make sure your file is loaded :
scriptLoaded() {
// your stuff to do!
}
Another way is using react Helmet:
first install it using :
npm install --save react-helmet
then use it like this
<Helmet>
<script src="www.test.ts" />
</Helmet>
note that in this way your script will load in the <head>
I am new in ReactJS and getting this error while using jQuery with React JS for intlTelInput I have install npm jQuery and import all the code which required for. I have also include all the CSS and jQuery Links in my index.html and still the code not working and I get this error
TypeError: window.intlTelInput is not a function
If anyone has any idea or solution regarding for this issue, please help me to find a way
This is my Index.html page where I includes ALL the CDN links:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="build/css/intlTelInput.css">
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/css/intlTelInput.min.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.min.js"></script>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- ---------------------------------------------------------------------------- -->
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
This is My Login Page Code.
import React from 'react'
import firebase from './firebase'
import "./App.css";
import { getDatabase, ref, child, get } from "firebase/database";
// import PhoneInput from 'react-phone-number-input'
import $ from 'jquery';
import intlTelInputUtils from 'jquery';
class Login extends React.Component {
// <-------------------------------------------------------------------------------------->
// jQuery code
componentWillMount() {
var phoneNumber = window.intlTelInput(document.querySelector("#phoneNumber"), {
separateDialCode: true,
preferredCountries: ["in"],
hiddenInput: "full",
utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
});
$("#getCode").click(function () {
var full_num = phoneNumber.getNumber(intlTelInputUtils.numberFormat.E164);
$("input[name='phoneNumber[full]'").val(full_num);
localStorage.setItem("Phone_No", full_num)
});
}
// // <--------------------------------------------------------------------------------------------------------->
handleChange = (e) => {
const { name, value } = e.target
this.setState({
[name]: value
})
this.setState({ phoneNumber: value }, () => {
console.log(this.state.phoneNumber);
});
}
configureCaptcha = () => {
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
this.onSignInSubmit();
// console.log("Recaptca varified")
},
// defaultCountry: "IN"
}
);
}
onSignInSubmit = (e) => {
e.preventDefault()
this.configureCaptcha()
const phoneNumber = this.state.mobile
const appVerifier = window.recaptchaVerifier;
const dbRef = ref(getDatabase());
get(child(dbRef, `Users/${phoneNumber}`)).then((snapshot) => {
if (snapshot.exists()) {
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
.then((confirmationResult) => {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
window.confirmationResult = confirmationResult;
alert('An OTP has been sent to your registered mobile number')
localStorage.setItem("Phone_No", phoneNumber)
console.log(localStorage.getItem('Phone_No'));
}).catch((error) => {
console.error(error);
alert("Oops! Some error occured. Please try again.")
});
}
else {
alert('Sorry, this mobile number is not registered with us. Please use your registered mobile number.');
}
})
}
onSubmitOTP = (e) => {
e.preventDefault()
const code = this.state.otp
console.log(code)
window.confirmationResult.confirm(code).then((result) => {
// User signed in successfully.
const Users = result.user;
console.log(JSON.stringify(Users))
this.props.history.push("/home");
}).catch((error) => {
alert("You have entered wrong code")
});
}
render() {
return (
<div className="Main-header">
<img src="./55k-logo.png" alt="Company Logo" style={{ height: "80px", width: "200px" }} />
<br />
<div>
<h2>Login Form</h2>
<p>Limtless Water. From Unlimited Air.</p>
<form onSubmit={this.onSignInSubmit}>
<div id="sign-in-button"></div>
{/* <PhoneInput */}
<label>Mobile Number</label> <br />
{/* for="phoneNumber" */}
<input type="tel" id="phone" name="mobile" placeholder="Enter Your Number" required onChange={this.handleChange} />
<div className="buttons">
<button type="submit">Submit</button>
</div>
</form>
</div>
<div>
<form onSubmit={this.onSubmitOTP}>
<label >Code</label> <br />
{/* for="code" */}
<input type="number" name="otp" placeholder="Enter The 6 Digit OTP" required onChange={this.handleChange} />
<div className="buttons" >
<button type="submit">Submit</button>
</div>
</form>
</div>
</div>
)
}
}
export default Login;
You should avoid to use jQuery in React projects.
For intl-tel-input, there are react-intl-tel-input and react-intl-tel-input-v2 packages available that can be used.
I am trying to integrate Paypal Payouts to my React app. However, I am stuck at the AAC part where I generate a component to let the user connect.
I tried to either load the script in index.html or to load it using the paypal-checkout package.
In the first case, I get told that paypal isn't defined and in the second case, I get told that I can't get the property driver from undefined.
Here is my code and my index.html.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const AACComponent = paypal.PayoutsAAC.driver('react', {
React,
ReactDOM
});
export class Affiliation extends Component {
render () {
const { t } = this.props;
const { data, candidates, hirees } = this.state;
return (
<Screen type="background-white" loading={this.state.loading} title={this.props.t('pages:affiliation')}>
<div className="container tw-space-y-3">
<div className="row">
<div className="col-lg-6 tw-mx-auto">
<div className="tw-card">
<h2 className="tw-text-xl tw-font-bold">{t('affiliationHired')}</h2>
<AACComponent
clientId={process.env.REACT_APP_PAYPAL_CLIENT_ID}
merchantId={process.env.REACT_APP_PAYPAL_MERCHANT_ID}
env={process.env.REACT_APP_PAYPAL_ENV}
pageType="login"
onLogin={() => {}} />
</div>
</div>
</div>
</div>
</Screen>
);
}
}
Affiliation.propTypes = {
t: PropTypes.func.isRequired
};
export default withRouter(withTranslation('common')(Affiliation));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="/" />
</head>
<script src="https://www.paypalobjects.com/payouts/js/payouts_aac.js"></script>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I removed the unecessary code to not clutter my code.
Any idea?
I have two files created in LWC OSS app
first file at src/client/index.html and src/client/index.js
second file at src/client/index2.html and src/client/index2.js
I want to navigate to index2.html when clicked on the button in my-app (LWC component) which is appended using index.js
Am new to express js and node js. Please help!
Below is the code of the files,
index.html (File location: src/client/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My LWC App</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!-- Block zoom -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link rel="shortcut icon" href="./resources/favicon.ico" />
</head>
<body>
<div id="main"></div>
</body>
</html>
index.js (File location: src/client/index.js)
import { createElement } from 'lwc';
import MyApp from 'my/app';
const app = createElement('my-app', { is: MyApp });
// eslint-disable-next-line #lwc/lwc/no-document-query
document.querySelector('#main').appendChild(app);
app.html (File location: src/client/modules/my/app/app.html)
<template>
<!-- LWC sample component <my-greeting> -->
<div class="center greeting">
<!-- <my-greeting speed="slow"></my-greeting> -->
<my-greeting speed="medium"></my-greeting>
<!-- <my-greeting speed="fast"></my-greeting> -->
</div>
<div class="center">
<img src="./resources/lwc.png" />
</div>
<!-- Page code -->
<div class="center">
<div class="container">
<!-- prettier-ignore -->
<p class="info">
Edit <strong class="code">src/client/modules/my/app/app.html</strong>
<br />and save for live reload.
</p>
</div>
<div>
Learn LWC
<button onclick={redirect}>Click to redirect</button>
</div>
</div>
</template>
app.js (File location: src/client/modules/my/app/app.js)
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
redirect(){
//code for to navigate to index2.html
}
}
index2.html (File Location: src/client/index2.html)
<html lang="en">
<body>
<div id="main"></div>
</body>
</html>
index2.js (File Location: src/client/index2.js)
import { createElement } from 'lwc';
import MyNewApp from 'my/newApp';
const app = createElement('my-app', { is: MyNewApp });
// eslint-disable-next-line #lwc/lwc/no-document-query
document.querySelector('#main').appendChild(app);
7.newApp.html (File location: src/client/modules/my/newApp/newApp.html)
<template>
<h1> Redirected to index2 --> newApp </h1>
</template>
Please let me know if you need more information.
Thanks,
Navaprasad
I am trying to create a project with React and Webpack. I am new in using these, but none of the solutions found related to the error that I have did work.
I have my StartPage.html, using StartPage.js which builds, is present in bundle.js and runs perfectly.
StartPage.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Copyright application</title>
</head>
<body>
Image Upload
<div id="root2"></div>
</body>
</html>
StartPage.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class StartPage extends Component {
render() {
return (
<div> StartPage </div>
);
}
}
ReactDOM.render(
<StartPage />,
document.getElementById('root2')
);
export default StartPage
But now I have ImageUploader.html which is build in the same style, but with a more complex side on ImageUploader.js
ImageUploader.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upload Image</title>
</head>
<body>
<div id="image"></div>
</body>
</html>
ImageUploader.js - just the render and the DOM
render() {
return (
<div className="ImageUploader">
<nav className="navbar pure-menu pure-menu-horizontal">
IPFS File Upload DApp
</nav>
<main className="container">
<div className="pure-g">
<div className="pure-u-1-1">
<h1>Your Image</h1>
<p>This image is stored on IPFS & The Ethereum Blockchain!</p>
<h2>Upload Image</h2>
<form onSubmit={this.onSubmit} >
<input type='file' onChange={this.captureFile} />
<input type='submit' />
</form>
</div>
</div>
</main>
</div>
);
}
}
ReactDOM.render(
<ImageUploader />,
document.getElementById('image')
);
export default ImageUploader
This one is not created in bundle.js, although the webpack creates it.
Webpack folder after npm run build
But I have this error in the console: _registerComponent(...): Target container is not a DOM element .. which I have exhaustively researched and none of the found solutions worked for me: like changing the order of the div id="" with the bundle.js script
like this one, where the script is created automatically by webpack
I have spent quite a lot of time on this error or trying to find another solution to create the multiple pages with Webpack.
This is webpack.config.prod.js and dev is defined in the same way regarding the pages:
webpack.config.prod.js
plugins: [
new InterpolateHtmlPlugin({
PUBLIC_URL: publicUrl
}),
new HtmlWebpackPlugin({
template: './src/public/StartPage.html',
inject: true,
chunks: ['start'],
filename: 'StartPage.html'
}),
new HtmlWebpackPlugin({
template: './src/public/ImageUploader.html',
inject: true,
chunks: ['image'],
filename: 'ImageUploader.html'
}),
And I have specified the .js file in the entry of module.exports:
entry: {
image: './src/ImageUploader/ImageUploader.js',
start: './src/StartPage/StartPage.js'
If someone has an idea about what could be wrong with this..