We Keep Coding

Reveal.js not initialising in vue except on refresh

I'm creating a Vue app to read comic books via Reveal.js. The component takes the data from the parent. there is an Axios call in the parent to provide the data from a rest API. I'm also using Vue router with the createWebHashHistory setup as I'm using a Django backend to provide the API.
If I refresh the page it will load the presentation correctly but when I navigate to the page it doesn't seem to initialise Reveal. there are no errors in the console.
I've tried to watch the route changing and other events to run Reveals sync or initialise but I've not had any success.
component
<template>
<div class="reveal" id="comic_box" ref="comic_box">
<div id="slides_div" class="slides">
<section v-for="(page, index) in comic_data.pages" :key="page.index" :data-menu-title="page.page_file_name">
<img :data-src="'/image/' + comic_data.selector + '/' + page.index " class="w-100" :alt="page.page_file_name">
</section>
</div>
</div>
</template>
<script>
import Reveal from "reveal.js";
export default {
name: "TheComicReader",
data () {
return {
}
},
props: {
comic_data: Object
},
methods: {
},
watch: {
'$route' (to, from) {
Reveal.initialize()
}
},
mounted () {
Reveal.initialize()
},
}
</script>
<style scoped>
</style>
comic_data
{
"selector": "e1b76b93-814c-4ee8-9104-8c8187977836",
"title": "Batman 125 (2022) (digital-SD).cbr",
"last_read_page": 0,
"pages": [
{
"index": 0,
"page_file_name": "Batman 125-000.jpg",
"content_type": "image/jpeg"
},
{
"index": 1,
"page_file_name": "Batman 125-001.jpg",
"content_type": "image/jpeg"
}
]
}

After further investigation I noticed that the DOM elements in Reveal were not updating after moving away from the page. I solved this by forcing Reveal to bind to the new comic_box by ref. This is now consistently loading the presentation correctly.
mounted () {
Reveal(this.$refs.comic_box).initialize()
}

Particle.js not working on ReactJS website

I have been trying to implement Particles.js on my portfolio website but have been rather unsuccessful. These are the following lines of code I have run in my library to get it running:
npm install tsparticles
npm install react-particles-js
I have referred to https://www.geeksforgeeks.org/how-to-use-particles-js-in-react-project/ and https://www.npmjs.com/package/react-particles-js and went about including their code as they went about it but nothing seems to appear on my page.
Here's an image of my page right now:
How my page looks right now
This is my code for the page:
import React, { useEffect } from 'react';
import Particles from 'react-particles-js';
const Index_body = () =>{
return(
<React.Fragment>
<div className="index_body">
<Particles
params={{
"particles": {
"number": {
"value": 50
},
"size": {
"value": 3
}
},
"interactivity": {
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
}
}
}
}}
/>
</div>
</React.Fragment>
);
}
export default Index_body;
Hope you guys can help me out! Thanks!

in default Particles stroke color is white therefor i think you can't see partials . So try to change and see wrapping component background color or partial stroke color.
you can change particle color with below code 👇
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#0030ff"
},
...
}

I followed these steps and it worked for me:
1 - I created a new react app
npx create-react-app my-app
2 - installed npm modules:
npm i react-tsparticles
npm i react-particles-js
3 - Copied this code and pasted it in the App.js file.
import React, { Component } from 'react';
import Particles from 'react-particles-js';
class App extends Component {
render() {
return (
<div style={{ backgroundColor: '#333' }}>
<Particles
params={{
particles: {
number: {
value: 50
},
size: {
value: 3
}
},
interactivity: {
events: {
onhover: {
enable: true,
mode: 'repulse'
}
}
}
}}
/>
</div>
);
}
}
export default App;
I am assuming it is because of the white background color or white stroke/particles color that overshadows.
I used your settings, I think it is definitely the background color that is why you cannot see any particles on the browser.
Here is the Github link: https://github.com/siddharth-sunchu/test-particles-lib
You can clone this and do npm start.

Why I am getting "no-undef " error when I run react js component class?

I am new to react js. I have created a class extends Component. When I run my code it throws error mentioned that, variables are not defined. I am following a tutorial. This is works for the tutor correctly. But I am getting error.
App.js
import logo from './logo.svg';
import './App.css';
import React from 'react';
import TextCard from './textCard';
class App extends React.Component {
textArr = [
{
id: 1,
name:"Name1",
department:"Computer",
semester :7,
},
{
id:2,
name: "Name2",
department: "Computer",
semester: 7,
},
{
id: 3,
name: "Name3",
department: "Computer",
semester: 7,
}
]
textCards = this.textArr.map((item)=>{
return (
<TextCard key={item.id} name={item.name} department={item.department} semester={item.semester} />
)
})
hideOnClick(){
alert('Hide btn pressed')
}
text1 = "Testing variable access"
render(){
return(
<div className="App">
<h1>My React js</h1>
<h2>React js course from Udemy</h2>
<hr></hr>
<h3>JSX test</h3>
<hr></hr>
<div>{this.text1}</div>
<hr></hr>
<button onClick={this.hideOnClick}>Hide List</button>
<div>
{this.textCards}
</div>
</div>
);
}
}
export default App;
textCard.js
import React from 'react';
import classess from './textCard.module.css';
const TextCard = (props) =>{
return(
<div className={classess.dynamicTest}>
<h2>{props.name}</h2>
<p>{props.department}</p>
<p>{props.semester}</p>
</div>
)
}
export default TextCard;
The Error
Failed to compile.
src\App.js
Line 11:3: 'textArr' is not defined no-undef
Line 34:3: 'textCards' is not defined no-undef
Line 50:3: 'text1' is not defined no-undef
Search for the keywords to learn more about each error.

You need to install and use the #babel/plugin-proposal-class-properties to use class fields. Class fields are not in the Javascript core language yet and you need to tell the Babel compiler how to handle them if you want to use them.
npm install --save-dev #babel/plugin-proposal-class-properties
And add this to your .babelrc.json
"plugins": ["#babel/plugin-proposal-class-properties"]
If your tutorial didn't mention that you need to install this plugin, it is not a good tutorial.

broken logo image when importing from json file in React App

I am in the process of importing an svg image which path is in a json file. Below is part of the json file:
[
{
"id": 1,
"company": "Photosnap",
"logo": "./images/photosnap.svg",
"new": true,
"featured": true,
"position": "Senior Frontend Developer",
"role": "Frontend",
"level": "Senior",
"postedAt": "1d ago",
"contract": "Full Time",
"location": "USA Only",
"languages": ["HTML", "CSS", "JavaScript"]
},
{
I have created two components. As the app is showing a list of jobs. So the I have a job list component and a job card component.
The code for the job listing component is as follows:
import React from 'react';
import './job-listing.styles.css';
import JobCard from '../job-card/job-card.component.jsx/job-card.component';
import { Component } from 'react';
class JobListing extends Component {
constructor() {
super();
this.state = {
jobs: []
}
};
componentDidMount() {
fetch('/data.json')
.then(response => response.json())
.then(data => this.setState({jobs: data}))
}
render() {
return (
<div>
{this.state.jobs.map(({id, ...otherJobProps}) =>(
<JobCard key={id} {...otherJobProps} />
))}
</div>
)
}
}
export default JobListing;
and for the Job Card component is below:
import React from 'react';
import './job-card.styles.css';
const JobCard = ({company, position, postedAt, contract, location, logo }) => (
<div className='card'>
<img src={logo} alt="logo" width="42" height="42"></img>
<h2>{company}</h2>
<h1>{position}</h1>
<div className='details'>
<h3>{postedAt} ·</h3>
<h3>{contract} ·</h3>
<h3>{location}</h3>
</div>
</div>
)
export default JobCard;
At the moment this is what I get
Any help would be appreciated.

If you are using create-react-app you will want to put static assets such as images (if you are not not ES6 importing images into the code) in the public folder. Try moving these images into the public folder created by create-react-app. You may also need to update the paths. Assuming your structure is:
public
images
photosnap.svg
You may need to change:
"logo": "./images/photosnap.svg",
to:
"logo": "/images/photosnap.svg",
Hopefully that helps!

Using ParticleJS with Gatsby

I'm using ParticleJS React component with gatsby.
I start with fetching npm install react-particles-js.
I started with a very simple example :
import React from "react"
import Particles from 'react-particles-js';
export default () => (
<div>
<Particles params={{
"particles": {
"number": {
"value": 50
},
"size": {
"value": 3
}
},
"interactivity": {
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
}
}
}
}}/>
</div>
)
The rendered HTML is something like this :
<div>
<div id="tsparticles">
<canvas class="tsparticles-canvas-el" width="3584" height="1792" style="width: 100%; height: 100%;">
</canvas>
</div>
</div>
Still, nothing is displayed! Am I missing something here?

Everything already worked as expected. Just be careful that by default the particles displayed by the canvas are white. Hence, they will be invisible if the background is white as in my case.
Changed the particles to black and they appeared. Below a minimal working example :
<Particles
params={{
particles: {
color: {
value: "#000000"
}
}
}}
/>

That's a known issue using that library with Gatsby js, but there are workarounds, you can check this GitHub issue: https://github.com/Wufe/react-particles-js/issues/23
And here's a reproduction: https://codesandbox.io/s/goofy-lake-i0c7z?file=/src/pages/index.js

wrap it wit return like
export default () => (
return (
/** yours here)
)