React doesn't recognize Parallax.js - javascript

I am trying to install https://github.com/wagerfield/parallax/, I already read the documentation, and I got a sample of how to use it in javascript, I am going to use it in React, so, with that sample and the documentation for react I think my code should works, but it doesnt!, the console print this error:
Warning: React does not recognize the `dataDepth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `datadepth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
This is the sample that I read for the example:
https://github.com/wagerfield/parallax/blob/master/examples/pages/simple.html
And this is the example of how to use parallax.js in react:
https://github.com/wagerfield/parallax/issues/167
This is my actual code of jsx:
import React, {useEffect, useRef} from 'react';
// #ts-ignore
import Parallax from 'parallax-js';
import BackgroundIMG from '../assets/img/background.jpg';
import Guitar from '../assets/img/guitar.png';
import Layer1 from '../assets/img/layer1.png';
import Layer2 from '../assets/img/layer2.png';
import Layer3 from '../assets/img/layer3.png';
import Layer4 from '../assets/img/layer4.png';
import Layer5 from '../assets/img/layer5.png';
import Layer6 from '../assets/img/layer6.png';
import './styles/Home.css';
const Home = () => {
const sceneEl = useRef(null);
useEffect(() => {
const parallaxInstance = new Parallax(sceneEl.current, {
relativeInput: true,
})
parallaxInstance.enable();
return () => parallaxInstance.disable();
}, [])
return (
<div id="container">
<div id="scene" ref={sceneEl}>
<div dataDepth="1.00"><img src={Layer1} /></div>
<div dataDepth="0.80"><img src={Layer2} /></div>
<div dataDepth="0.60"><img src={Layer3} /></div>
<div dataDepth="0.40"><img src={Layer4} /></div>
<div dataDepth="0.20"><img src={Layer5} /></div>
<div dataDepth="0.00"><img src={Layer6} /></div>
</div>
</div>
)
}
export default Home;
My browser show me this!
But it doesnt have the parallax effect.
This is where u can see a demo of what I am talking about.
http://matthew.wagerfield.com/parallax/

Related

Dynamic import image in Vue-3

I'm trying to show a dynamically imported image, but it's not working with the error
'Cannot find module'
This is my component
<template>
<div class="footer">
<div v-for="footerItem in getters" :key="footerItem.id">
<img :src="methods.requireImage(footerItem.icon)" alt="">
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from '#/store'
import { requireImage } from '#/modules/images'
export default defineComponent({
name: 'Footer',
setup () {
const store = useStore()
const methods = {
requireImage
}
return {
getters: store.getters.getFooterItems,
methods
}
}
})
</script>
And this is module
export const requireImage = async (link: string) => {
// return require(link)
const image = await import(link)
return image
// const images = require.context('../assets', false)
// return images('color-circle.svg')
}
Commented out code not working
If you pass the full path to require in a variable, Webpack can't load the image. This is roughly because it's a build-time tool, and the path is created at runtime. If you hard-code at least some of the path though, that will be sufficient:
export const requireImage = link => {
return require(`#/assets/${link}`);
}
Note: Removed the unnecessary async or the return value would be a promise
Your variable footerItem.icon should just contain the filename color-circle.svg now that some of the path is hard-coded in the call to require. With that done, you can use the method in the template as you wanted:
<img :src="methods.requireImage(footerItem.icon)" alt="">
Be aware that at the moment your wrapper method is unnecessary because you could get the same result from:
<img :src="require(`#/assets/${footerItem.icon}`)">

react-slideshow-image package not loading images from google drive

I've been trying for two days to make heads or tails of the react-slideshow-image package. I've installed all the missing dependencies by hand, I tried moving the images folder around (anything outside of src threw an error immediately though...), and I also tried uploading my images to an external google drive and substituting their links for the ones given in the example. I've disabled all other components inside the App.js.
Bottom line: the package only works if I use the image links provided in the example. No other images are ever detected.
Here is my code (copied and pasted from the example):
import { Fade } from "react-slideshow-image";
import "react-slideshow-image/dist/styles.css";
// import images from "./images/homepage";
const fadeImages = [
"https://drive.google.com/file/d/1zAkmE3ZoXgYRjhylfRHCZKUJkUakCrfZ/view?usp=sharing",
"https://drive.google.com/file/d/11Gz-fVv4hiKnfHgEPoLPZ02PlNQY3EYP/view?usp=sharing",
"https://drive.google.com/file/d/1B7WAX020SBZ1Bdq9TpC1ps0-XsdIJwWN/view?usp=sharing"
// "https://images.unsplash.com/photo-1506710507565-203b9f24669b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1536&q=80",
// "https://images.unsplash.com/photo-1536987333706-fc9adfb10d91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
];
export default function App() {
return (
<div className="slide-container">
<Fade>
<div className="each-fade">
<img src={fadeImages[0]} alt="" />
</div>
<div className="each-fade">
<img src={fadeImages[1]} alt="" />
</div>
<div className="each-fade">
<img src={fadeImages[2]} alt=""/>
</div>
</Fade>
</div>
);
}
Original unspalsh image links have been commented out to see if my links work, but they don't. Using images other than the ones provided seems to crash the slider entirely.
screenshot of live server view of my webstie
App.js is rendered correctly, console does not log a sinle glitch.
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';
// import Carousel from "./components/main/Carousel.js";
// const divStyle = {
// position: "absolute"
// }
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
What am I doing wrong?
You need to store the images ids and use a different path to get the image url https://drive.google.com/uc?id="<file-id>:
const fadeImages = [
"1zAkmE3ZoXgYRjhylfRHCZKUJkUakCrfZ",
"11Gz-fVv4hiKnfHgEPoLPZ02PlNQY3EYP",
"1B7WAX020SBZ1Bdq9TpC1ps0-XsdIJwWN"
];
const PATH = "https://drive.google.com/uc?id=";
then:
export default function App() {
return (
<div className="slide-container">
<Fade>
{fadeImages.map(src => (
<div className="each-fade">
<img src={`PATH${src}`} alt="" />
</div> ))
}
</Fade>
</div>
);
}

TypeError using Materialize-CSS with React

i'm having a problem using Materialize-CSS carousel.
The standard way to create the carousel is :
<div class="carousel">
<a class="carousel-item" href="#one!"><img
src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img
src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img
src="https://lorempixel.com/250/250/nature/3"></a>
</div>
But I want to create a carousel item for every item in an array named
"products" hence i'm trying this code in the JSX :
<div className="carousel">
{generalStore.products.map(p =>
<a className="carousel-item"><img src={p.pic} /></a>)}
</div>
p,pic == image url
But this returns an error :
TypeError: Cannot read property 'clientWidth' of undefined
Ant ideas to solve this?
Thanks
It can be implemented in materializeCSS also.
For this, you need to do npm install materialize-css#next. After this, you need to import the materialize-css in your component JS file.
To use the Javascript materialize-css components, a reference of these components has to be made in componentDidMount() has to be made and then it can be used in ref.
CodeSandBox - Working Demo
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import data from "./data.json";
class Carousel extends Component {
componentDidMount() {
const options = {
duration: 300,
onCycleTo: () => {
console.log("New Slide");
}
};
M.Carousel.init(this.Carousel, options);
}
renderThis = () => {
return data.map(i => (
<a key={i.url} className="carousel-item">
<img src={i.url} />
</a>
));
};
render() {
return (
<div
ref={Carousel => {
this.Carousel = Carousel;
}}
className="carousel"
>
{this.renderThis()}
</div>
);
}
}
export default Carousel;

Vega-tooltip in React application

I have a React application that uses vega-lite for data visualizations. I tried to use the official tooltip addon for vega (https://github.com/vega/vega-tooltip), however I have no idea how to do it in a React component.
This is the component I have:
import React from 'react';
import PropTypes from 'prop-types';
import VegaLite from 'react-vega-lite';
const VegaChart = ({data, spec}) => {
return(
<div className="vega-chart-wrapper">
<VegaLite spec={spec} data={data} />
</div>
)
}
VegaChart.propTypes = {
data: PropTypes.object.isRequired,
spec: PropTypes.object.isRequired
}
export default VegaChart;
From the documentation of vega-tooltip, it says that I can install the module and then I have to do this:
<!-- Placeholder for my scatter plot -->
<div id="vis-scatter"></div>
var opt = {
mode: "vega-lite",
};
vega.embed("#vis-scatter", vlSpec, opt, function(error, result) {
// result.view is the Vega View, vlSpec is the original Vega-Lite specification
vegaTooltip.vegaLite(result.view, vlSpec);
});
This looks like the standard way to integrate in a jQuery application, but this is not gonna work in a React component. Any ideas?
Your react-vega-lite must already include vega-lite. So
import * as vega from 'vega-lite';
And put the rest in componentDidMount of your VegaChart

React Js: How to render a using a template?

I did the following using jquery. I want to achieve the same thing using react js but i don't how to render it more than once.
jsFiddle- https://jsfiddle.net/uxzdfsLj/4/
React js code
import ReactDOM from 'react-dom';
import React from 'react';
import {render} from 'react-dom';
import $ from 'jquery';
var Note = React.createClass({
componentDidMount : function(){
ReactDOM.findDOMNode(this.refs.nameInput).focus()
},
create:function(event){
if(event.charCode == 13) {
alert('Enter... (KeyPress, use charCode)');
}},
render :function(){
return(
<div class="reply">
<input type="text" class="text" ref="nameInput" placeholder="Enter Text Here..." onKeyPress={this.create}></input>
</div>
)
}
});
ReactDOM.render(<Note/>, document.getElementById('app'));
You can use dangerouslySetInnerHTML to render user-enterd HTML:
<div dangerouslySetInnerHTML={{__html: '<h1>Go</h1>'}} />
Note, however, that you should use it with extreme care. User-inputed HTML can open your app up for security vulnerabilities, if what is entered is stored on the server somewhere and sent to other users.
You can write your html in render method and just change your
componentDidMount : function(){
ReactDOM.findDOMNode(this.refs.nameInput).focus()
},
to
componentDidMount : function(){
this.refs.nameInput.focus()
},

Categories