I am using vantajs wave library and my issue is how do i get the waves to continue to render on a CSS selector after I click through the tablinks of my react app?
The first error I get is on Brave browser when it says:
"three.r92.min.js:28 Uncaught TypeError: Cannot read property 'precision' of null"
and doesn't render the wave at all initially.
However, if i go to Google Chrome and look at the background of my selected element there is the wave effect that I implemented provided by https://www.vantajs.com/?effect=waves#(backgroundAlpha:1,color:2105474,shininess:30,waveHeight:15,waveSpeed:1,zoom:1)
But then, after I switch from the home tab to another tab, then come back to home (where my selected element is), the wave effect is no longer behind the selected element as it says:
"vanta.waves.min.js:161 [VANTA] Cannot find element .showcase__container
Here is my HTML:
<meta charset='utf-8' lang="EN-US">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="./src/three.r92.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.waves.min.js"></script>
<link rel="stylesheet" href="./css/style.css">
<title>DigitalWebFlex</title>
</head>
<body>
<div id='root'></div>
<script type='text/javascript' src='/dist/bundle.js' charset='utf-8'></script>
<script>
VANTA.WAVES('#showcase__container');
</script>
</body>
And my React:
<div className="showcase__container" id="showcase__container">
<button className="button button--animated button--white" onClick={this.setPagePortfolio}>Portfolio</button>
</div>
Thanks in advance!
hey you can install vanta using npm i vanta
and include three.js in the head
and then
import React from 'react'
import WAVES from 'vanta/dist/vanta.waves.min'
class MyComponent extends React.Component {
constructor() {
super()
this.vantaRef = React.createRef()
}
componentDidMount() {
this.vantaEffect = WAVES({
el: this.vantaRef.current
})
}
componentWillUnmount() {
if (this.vantaEffect) this.vantaEffect.destroy()
}
render() {
return (
<div ref={this.vantaRef}>
/* Foreground content goes here */
</div>
)
}
}
This should help, You can refer to this page and Vanta.js README for a better understanding
Related
I'm working with svelte and made a chat widget, for styling I used tailwindcss.
the main problem with the chat widgets are you have to render them in an iframe so that it doesn't disturb the css of its remote site. so I achieved loading it inside iframe but it rendered without tailwind styles.
// main.ts is my file where I declared the iframe
import './app.css';
import App from './App.svelte';
// you can ignore this interface if you find it confusing
interface IWidget {
iframeContainer: HTMLElement | null;
init: (props: any) => void;
createContainer: () => void;
handleMessage: (event: MessageEvent) => void;
setupListeners: () => void;
}
const app = (() => {
// new App({
// target: document.getElementById('app'),
// });
const iframeContainer = document.createElement('div');
iframeContainer.id = 'my-chat-widget';
document.body.appendChild(iframeContainer);
// create iframe
const iframe = document.createElement('iframe');
iframe.id = 'my-chat-iframe';
iframe.srcdoc = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Support</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div id="my-widget"></div>
</body>
</html>`;
document.getElementById('my-chat-widget').appendChild(iframe);
const iframeWindow: HTMLIFrameElement =
document.getElementById('my-chat-iframe');
document.getElementById('my-chat-iframe').onload = () => {
new App({
target: iframeWindow.contentWindow.document.getElementById('my-widget'),
});
};
})();
export default app;
the file above is similar to index.tsx in react
Basically I'm directly targeting my svelte app into the iframe, only the problem I'am facing is the tailwind css is not loading.
methods I tried
adding Play CDN link from tailwind into head of above file.
(this worked but not feasible as production build)
directly linking the app.css into head of above file.
(this also worked but only in dev mode because the bundler adds its content hash, I want it to be production ready)
I am trying to inject some React code into an HTML document. I am following React's own documentation and feeding their starter code (a simple like button) into the page. Everything was working great. I changed it to use JSX, changed it to a functional component using hooks instead of a class component with state. No problems.
However, whenever I include an import call and try to bring in another component, the component breaks on the page and stops displaying, but doesn't throw any kind of error I can see.
How do I develop in a "react-y" way with components and modularity while injecting it into an html page?
Here is the code I'm working with at the moment:
HTML document
<body>
<div id="react-root"></div>
<!-- inject react, reactDOM and JSX engine -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- point to component -->
<script src="transpiled/app.js"></script>
</body>
React Component
'use strict';
import {SecondComponent} from './components/SecondComponent';
const e = React.createElement;
const LikeButton = () => {
const [liked, setLiked] = React.useState(false);
if (liked) return 'You liked this functional component.'
const handleLikeClick = () => {
setLiked(true);
}
return (
<div>
<button onClick={handleLikeClick}>new like button with jsx</button>
{liked && <SecondComponent/>}
</div>
)
}
const domContainer = document.querySelector('#react-root');
ReactDOM.render(e(LikeButton), domContainer);
Like I said, any sort of import statement seems to be where it breaks. Can't find resources online about it. Thanks in advance for your help!
UPDATE: After a bit of research importing modules between several <script> tags is now possible.
This can be achieved adding the Babel Plugin attribute data-plugins and setting the value to "transform-es2015-modules-umd" which will enable the UMD pattern.
You'll also need to set type="text/babel" on each <script> tag.
This will allow you to use the import statements directly inside each file. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./Header.js"></script>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./App.js"></script>
</body>
</html>
Working Gist Example
I see vuetify project have title bar. But the title in public/index.html. Outside src folder
So I had trouble making it dynamic. Every page must have different title. If it's same, it's very influential on SEO
My public/index.html like this :
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>test-vuetify</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but test-vuetify doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
How can I solve this problem? I want to make title on every page is different. According to page content
Hard to tell exactly what your constraints are from the question, but in case this helps anyone else make their Vuetify title bar dynamic...
In index.js, add some "meta" to the routes:
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/page1',
name: 'page-1',
component: ...,
meta: {
title: 'Page 1'
}
},
{
path: '/page2',
name: 'page-2',
component: ...,
meta: {
title: 'Page 2'
}
}
]
const router = new VueRouter({
mode: 'history',
base: (your base url),
routes: routes,
});
export default router
Then in the Vuetify title bar, use the route meta defined above:
<v-toolbar-title>{{ $route.meta.title || "Default title" }}</v-toolbar-title>
I am trying to apply material design ripple effect to a button but on the browser I see no ripple effect applied to the button,
The code that is using the ripple is,
btn_ripple = document.querySelector('.mdc-button');
mdc.ripple.MDCRipple.attachTo(btn_ripple);
I have tried the below but none of them work,
mdc.autoInit(); // after the above code
MDCRipple.attachTo(document.querySelector('.mdc-button'));
I am not using node for bundling.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="masterCSS.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js">
btn_ripple = document.querySelector('.mdc-button');
mdc.ripple.MDCRipple.attachTo(btn_ripple);
mdc.autoInit();
MDCRipple.attachTo(document.querySelector('.mdc-button'));// does not work
const foo = new MDCFoo(document.querySelector('.mdc-button'));//does not work
</script>
</head>
<body>
<div class="header">
</div>
<button class="mdc-button mdc-button--unelevated" style="margin-left: 50%;">RIPPLE</button>
</body>
</html>
The button doesn't exist at the time that the script runs.
Wrapping your script on a window.addEventListener('load', function(){ [...] }) is the first step to fix it.
Second, you have a <script> with a src attribute and then with code.
You can't mix both.
Just write a <script src="..."></script> and then open a new <script> with the inline code.
Note: this answer assumes that all files loaded properly.
Add matRipple in button tag and import MatRippleModule,
You also change the MatRippleColor
eg:
<button matRipple [matRippleColor]="'#cad1f7'">RIPPLE</button>
I tried to extend a <button>, but so far did not succeed.
What am I doing wrong. I'm using the Dart Editor+SDK 1.5.2
In pubspec.yaml the version for Polymer is set to:
polymer: ">=0.11.0 <0.12.0"
index.html
<!DOCTYPE html>
<html>
<head>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Extended Button - Dart v1.5.2</title>
<!--Extended Button-->
<link rel="import" href="view/ext_button.html" />
</head>
<body>
<button is="ext-button">Test Button</button>
<script type="application/dart">export "package:polymer/init.dart";</script>
</body>
</html>
view/ext_button.dart
import "dart:html";
import "package:polymer/polymer.dart";
#CustomTag("ext-button")
class ExtButton extends ButtonElement {
ExtButton.created() : super.created();
factory ExtButton(){
onClick.listen(clicked);
}
void clicked(MouseEvent e){
print("Ext-Button clicked");
}
}
view/ext_button.html
<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="ext-button" extends="button">
<template>
</template>
<script type="application/dart" src="ext_button.dart"></script>
</polymer-element>
So the code above does not work, but as soon as write it like below (just to validate the ext-button works) it tells me the following:
"web/index.html:20:7: custom element "ext-button" extends from "button", but this tag will not include the default properties of "button".
To fix this, either write this tag as <button is="ext-button"> or remove the "extends" attribute from the custom element declaration."
<ext-button>Test Button</ext-button>
So a little bit confused ;-) I think the fix is easy and simple - but I just don't see the problem ;-(
Just for further references, the two things above solved the problem.
Here are the updated parts, now it works.
view/ext_button.dart
import "dart:html";
import "package:polymer/polymer.dart";
#CustomTag("ext-button")
class ExtButton extends ButtonElement with Polymer {
ExtButton.created() : super.created()
{
polymerCreated();
onClick.listen(clicked);
}
void clicked(MouseEvent e){
print("Ext-Button clicked");
}
}
view/ext_button.html
<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="ext-button" extends="button">
<template>
<content></content>
</template>
<script type="application/dart" src="ext_button.dart"></script>
</polymer-element>
As far as I see, you are missing thwo things:
a call to polymerCreated() inside the custom elements constructor.
and extends ButtonElement with Polymer
There are already similar question. I'll look them up later when I have more time. Maybe you find them yourself in the meantime. Please add a comment with a link if you do.