We Keep Coding

React: How to find a dep inside a node module component for a hook?

React 16.8 | Typescript 3.5
I want to run useEffect to update an array inside App() every time a QR scanner inside a node module imported to the app updates one of its fields.
Alternatively, I would like to receive the data from 'onScan'.
How do you import and use as a dep elements of node module components? There's a page within a file called 'SendPage.jsx' which runs a useState hook called 'setTo()' to update a value 'to'. I'm looking to intercept that 'to' value and use it inside App().
These are my dependencies in node modules. Specifically, inside the "#burner-wallet/modern-ui" there's
"#burner-wallet/assets": "^1.0.0",
"#burner-wallet/core": "^1.0.0",
"#burner-wallet/exchange": "^1.0.0",
"#burner-wallet/modern-ui": "^1.0.9",
"#types/node": "12.0.4",
"#types/react": "*",
"#types/react-dom": "16.8.4",
"#types/react-router-dom": "^4.3.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "^3.2.0",
"typescript": "3.5.1",
"universal-cookie": "^4.0.4"
},
This is the package.json inside the "#burner-wallet/modern-ui" module space:
"name": "#burner-wallet/modern-ui",
"version": "1.0.9",
"license": "MIT",
"main": "dist/ModernUI.js",
"types": "dist/ModernUI.d.ts",
"scripts": {
"build": "tsc",
"start-local": "tsc -w",
"start-basic": "tsc -w"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-object-rest-spread": "^7.4.4",
"#babel/preset-typescript": "^7.3.3"
},
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
"repository": {
"type": "git",
"url": "https://github.com/burner-wallet/burner-wallet-2.git",
"directory": "packages/modern-ui"
},
"dependencies": {
"#burner-wallet/types": "^1.0.2",
"#burner-wallet/ui-core": "^1.0.2",
"#types/clipboard": "^2.0.1",
"#types/color": "^3.0.0",
"#types/ethereumjs-util": "^5.2.0",
"#types/qrcode.react": "^0.8.2",
"#types/react": "*",
"#types/react-qr-reader": "^2.1.2",
"#types/react-router-dom": "^4.3.4",
"#types/styled-components": "4.1.8",
"clipboard": "^2.0.4",
"color": "^3.1.2",
"ethereumjs-util": "^6.1.0",
"qrcode.react": "^0.9.3",
"react-qr-reader": "^2.2.1",
"styled-components": "^5.0.1"
}
}
My app.tsx file:
import React, { useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
import ScanContext from './scancontext';
import { setLocally, getLocallyStoredQRs } from './localstorage';
// import { xdai, dai, eth } from '#burner-wallet/assets';
import { xdai} from '#burner-wallet/assets';
import BurnerCore, { HistoryEvent } from '#burner-wallet/core';
import { InjectedSigner, LocalSigner } from '#burner-wallet/core/signers';
import { InfuraGateway, InjectedGateway, XDaiGateway, } from '#burner-wallet/core/gateways';
import Exchange, { Uniswap, XDaiBridge } from '#burner-wallet/exchange';
import ModernUI from '#burner-wallet/modern-ui';
import { HistoryProps } from '#burner-wallet/core/History';
const core = new BurnerCore({
signers: [new InjectedSigner(), new LocalSigner()],
gateways: [
new InjectedGateway(),
new InfuraGateway(process.env.REACT_APP_INFURA_KEY),
new XDaiGateway(),
],
// TODO use Sai
// assets: [xdai, dai, eth],
assets: [xdai],
});
const exchange = new Exchange({
pairs: [new XDaiBridge(), new Uniswap('dai')],
});
const QRCardsSpace = styled.div`
padding-bottom: 100px;
`;
function App() {
const [newQRs, setQR] = useState('');
// const storedCookieQRs: string[] = getLocallyStoredQRs();
const appUI = <ModernUI
title="Vincenz Burner Wallet"
core={core}
plugins={[exchange]}
/>
useEffect(() => {
// This will be where the addresses are assigned when read
console.log("useEffect");
console.log("newQRs" , newQRs);
var latestToAddress = "0x4f0f4m";
const QRData = [latestToAddress];
setQR(latestToAddress);
setLocally(QRData);
}, [appUI]); // Set here the conditional change to the QR data
return (
<div>
{appUI}
<QRCardsSpace>
<ScanContext />
</QRCardsSpace>
</div>
) };
export default App;

CkEditor 5 not working with ReactJs 18.2.0

I'm working on a ReactJs (v18.2.0) project that requires integration with CkEditor5.
Following the official documentation here, I've imported and set up the CkEditor.
Somehow, it's not working. A log of the editor returns null
CreateProduct.jsx
import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { CKEditor } from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
...
<div>
<CKEditor
editor={ClassicEditor}
data="<p>Hello World</p>"
onReady={editor => {
console.log(editor)
}}
onChange={(event, editor) => {
console.log(editor.getData())
}}
onBlur={(event, editor) => {}}
onFocus={(event, editor) => {}}
/>
</div>
...
export default CreateProduct;
if (document.getElementById('createProduct')) {
const container = document.getElementById('createProduct');
const root = createRoot(container);
root.render(
<React.StrictMode>
<CreateProduct />
</React.StrictMode>
);
}
package.json
...
"devDependencies": {
"#babel/preset-react": "^7.13.13",
"#ckeditor/ckeditor5-build-classic": "^34.2.0",
"#ckeditor/ckeditor5-react": "^5.0.2",
"#fortawesome/fontawesome-free": "^6.1.1",
"#popperjs/core": "^2.10.2",
"#table-library/react-table-library": "^4.0.10",
"#tailwindcss/forms": "^0.5.2",
"autoprefixer": "^10.4.7",
"axios": "^0.27.2",
"bootstrap": "^5.2.0",
"check-npm": "^1.0.0",
"formik": "^2.2.9",
"laravel-mix": "^6.0.49",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"resolve-url-loader": "^5.0.0",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"sweetalert2": "^11.4.23",
"sweetalert2-react-content": "^5.0.1",
"tailwindcss": "^3.1.6",
"yup": "^0.32.11"
}
...
Console Error
Browser Output not display toolsbar

In my case CKEditor wasn't showing at all.
I fixed it by removing <React.StrictMode>
Hope it helps :)

react-native-elements fontFamily issue

After installing react-native-elements and its dependencies, I'm unable to get the SearchBar component to render as it should
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Ionicons, MaterialIcons } from '#expo/vector-icons';
import { SearchBar } from 'react-native-elements';
const HomeScreen = () => {
const [search, setSearch] = useState('');
return (
<View>
<SearchBar
placeholder="Search, organisations, projects, and more"
value={search}
onChangeText={(searchTerm) => setSearch(searchTerm)}
/>
</View>
);
};
In the terminal console I get the following warnings
fontFamily "Material Icons" is not a system font and has not been loaded through Font.loadAsync.
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
- If this is a custom font, be sure to load it with Font.loadAsync.
at node_modules/expo-font/build/Font.js:27:16 in processFontFamily
at src/context/index.js:29:19 in loginUser
Here is my package.json dependencies
"dependencies": {
"#expo/vector-icons": "^12.0.5",
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/stack": "^6.0.11",
"axios": "^0.24.0",
"expo": "~44.0.0",
"expo-camera": "~12.1.0",
"expo-image-picker": "^12.0.1",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "~2.1.0",
"react-native-pager-view": "^5.4.9",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "^3.10.1",
"react-native-vector-icons": "^9.0.0",
"react-native-web": "~0.17.5"
},
"devDependencies": {
"#babel/core": "^7.16.5",
"#babel/preset-typescript": "^7.16.7"
},
All the resource on the matter I've found so far are a couple of years old and don't solve my problem, for example:
fontFamily Material Icons is not a system font and has to be Loaded through Exponent
and
console.error : "fontFamily "Material Icons" is not a system font and has not been loaded through Font.loadAsync

The icons need to be preloaded at the start of the App.
Reference here
This is what I had to do in App.js:
import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';
export default () => {
const [fontsLoaded] = useFonts({
Ionicons: require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf'),
MaterialIcons: require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf'),
'Material Icons': require('#expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf'),
});
if (!fontsLoaded) {
return <AppLoading />;
}
return (
<Main />
);
};

I've looked at the single-spa site on how to create parcels, I get exceptions

I've been trying to implement single-spa parcels, but I've been getting the following exception
index.js:167 Uncaught (in promise) Error: During 'mount', parcel threw an error:
<Parcel /> was not passed a mountParcel prop, nor is it rendered where mountParcel is within the React context.
If you are using <Parcel /> within a module that is not a single-spa application, you will need to import mountRootParcel from single-spa and pass it into <Parcel /> as a mountParcel prop
at index.js:167
at index.js:114
The error is about a mountParcel attribute of which is passed down the parcel, I've pulled it from single-spa library but still I get the same issue, I've been battling with this problem for a while now, please assist
Please find my code below
parcel-config.js
// myParcel.js
import React from 'react'
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react'
import MyParcelComponent from './my-parcel-component.component';
export const MyParcel = singleSpaReact({
React,
ReactDOM,
rootComponent: MyParcelComponent
})
export function bootstrap(props) {
return MyParcel.bootstrap(props).then(res => {
debugger;
});
}
export function mount(props) {
return MyParcel.mount(props);
}
export function unmount(props) {
return MyParcel.unmount(props);
}
// in this case singleSpaReact is taking our inputs and generating an object with the required lifecycles.
MyParcelComponent.js
import React from 'react';
export default class MyParcelComponent extends React.Component {
render() {
return (
<div >
<h1>This is a parcel</h1>
</div>
);
}
}
single-spa application. attempt to consume the parcel
import React from 'react';
import Parcel from 'single-spa-react/parcel'
import * as singleSpa from 'single-spa';
import { MyParcel } from './parcel1/parcel-config';
export default class Root extends React.Component {
componentWillMount(){
console.log(singleSpa);
}
render() {
return (
<div style={{ marginTop: '100px' }}>
This was rendered by app 1, which is written in React.
<Parcel
config={MyParcel}
mountParcel={singleSpa.mountRootParcel}
wrapWith="div" />
</div>
);
}
}
package.json
{
"name": "simple-single-spa-webpack-example",
"version": "1.0.0",
"description": "A simple example of how to use webpack with single-spa",
"scripts": {
"watch": "webpack-dev-server --open",
"build": "webpack --config webpack.config.js -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/joeldenning/simple-single-spa-webpack-example.git"
},
"author": "Joel Denning",
"license": "MIT",
"bugs": {
"url": "https://github.com/joeldenning/simple-single-spa-webpack-example/issues"
},
"homepage": "https://github.com/joeldenning/simple-single-spa-webpack-example#readme",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^2.1.1",
"http-server": "^0.10.0",
"style-loader": "^0.23.1",
"ts-loader": "^2.3.2",
"typescript": "^2.4.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.8.2"
},
"dependencies": {
"#angular/common": "^4.3.3",
"#angular/compiler": "^4.3.3",
"#angular/core": "^4.3.3",
"#angular/platform-browser": "^4.3.3",
"#angular/platform-browser-dynamic": "^4.3.3",
"#angular/router": "^4.3.6",
"core-js": "^2.4.1",
"es6-promise": "^4.1.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.4.2",
"single-spa": "^3.9.1",
"single-spa-angular2": "^1.2.0",
"single-spa-react": "^2.9.0",
"single-spa-vue": "^1.3.0",
"vue": "^2.6.10",
"zone.js": "^0.8.16"
}
}

Error showing in the React when tried to add counterup js

I have faced a problem. I have used "jquery.counterup": "^2.1.0" in my react project. But showing some errors. I am new in this environment. I have tried but can't be understood why showing these errors? Also, a similar error is showing when I have tried to add owl-carousel.
CounterUp NPM Source
import React, { Component } from "react";
import $ from "jquery";
import CountUp from "jquery.counterup";
class FunFactCOunter extends Component {
componentDidMount() {
Counter
$(".count").CountUp({
delay: 20,
time: 1500
});
}
render() {
return (
<React.Fragment>
<span className="count">500</span>K
<span className="count">450</span>K
</React.Fragment>
);
}
}
export default FunFactCOunter;
dependencies
"dependencies": {
"animate.css": "^3.7.0",
"bootstrap": "^4.1.3",
"jquery": "^2.1.4",
"jquery.counterup": "^2.1.0",
"popper.js": "^1.14.3",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-icofont": "0.0.6",
"react-scripts": "2.1.3",
"waypoints": "^4.0.1"
},