Particle.js not working on ReactJS website - javascript

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.

Related

Is there any way to add conditional files to json or data in json file able to be changed conditionally?

I'm using SASS and React and I have a particleJS library that I incorporated into my project. Everything is working great although I want my project to have a dark mode and I use particleJS as my background. I want to be able to add conditionals to it like when user clicks on dark mode it somehow changes the data in the particles.json file.
Here is a snippet of the json file:
"background": {
"color": {
"value": "#edf2f8"
},
"position": "50% 50%",
"repeat": "no-repeat",
"size": "20%"
}
I'd like to change the bg-color value to darken the background conditionally. If anyone could help that would be great!
This is also my jsx for particle.js
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import particlesOptions from "./particles.json";
import React, { useCallback } from "react";
const ParticleBackground = () => {
const particlesInit = useCallback((main) => {
loadFull(main);
}, []);
const particlesLoaded = (container) => {
console.log(container);
};
return (
<Particles
init={particlesInit}
loaded={particlesLoaded}
options={particlesOptions}
/>
);
};
export default ParticleBackground;

ReferenceError: ResizeObserver is not defined:Gatsby with nivo

I use #nivo/pie with "gatsby": "^3.13.0".
But I got an error when I gatsby build.
WebpackError: ReferenceError: ResizeObserver is not defined
Nivo's version is "#nivo/pie": "^0.79.1".
I have no idea to solve it. I would be appreciate if you could give me some advice.
And here is the React code using nivo's pie chart.
PieChart.tsx
import React from 'react'
import { ResponsivePie } from '#nivo/pie'
const PieChart: React.FC = ({ data }) => {
return (
<>
<div>
<ResponsivePie
data={data}
margin={{ top: 30, right: 80, bottom: 70, left: 80 }}
borderColor={{
from: 'color',
modifiers: [
[
'darker',
0.2,
],
],
}}
arcLabelsTextColor={{
from: 'color',
modifiers: [
[
'darker',
2,
],
],
}}
fill={[
{
match: {
id: 'ruby',
},
id: 'dots',
},
]}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 0,
translateY: -1,
},
]}
/>
</div>
</>
)
}
export default PieChart
===================================================================
I could fix it after I updated gatsby-node.js. But I got another error WebpackError: Minified React error #130;. And I could fix it by this final code. There's no build error.
PieChart.tsx
import React from 'react'
import { ResponsivePie } from '#nivo/pie'
const PieChart: React.FC = ({ data }) => {
return (
<>
{typeof window !== 'undefined' && ResponsivePie &&
<ResponsivePie
data={data}
...
/>}
</>
)
}
export default PieChart
Thank you.
Try using a null loader on Gatsby's SSR. In your gatsby-node.js:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /#nivo\/pie/,
use: loaders.null(),
},
],
},
})
}
}
Normally this kind of issue (gatsby develop OK vs gatsby build KO) are related to webpack's bundling on the server (Server-Side Rendering), especially when dealing with third-party dependencies that interact with the window or other global objects (such as document) like chart modules do. This happens because when you run gatsby build your code is interpreted by the Node server, where there's no window available yet. On the other hand, gatsby develop is interpreted by the browser, where there is.
With this approach, you are adding a dummy loader (null) to webpacks to load the dependency on the client-side, where the window is available.
Keep in mind that test: /#nivo\/pie/ is a regular expression (that's why is between slashes, /) that tests the node_modules folder so ensure that /#nivo\/pie/ is a valid path.

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)
)

React Marquee module giving error

I am getting an error in the Chrome Dev Tools Console when using the react-text-marquee module in react.
I am not sure how to resolve this issue without changing the output to a string instead of JSX.
I should clarify that the functionality of the page is actually working correct, however it would be nice to get rid of errors in case they cause issues down the line.
This is the chrome console error:
09:43:29.747 index.js:2177 Warning: Failed prop type: Invalid prop `text` of type `array` supplied to `Marquee`, expected `string`.
in Marquee (at Session.js:86)
in Session (at Content.js:83)
in div (at Content.js:88)
in Content (at App.js:13)
in div (at App.js:11)
in App (at index.js:9)
__stack_frame_overlay_proxy_console__ # index.js:2177
The complete Session.js code
import React from 'react';
import Marquee from 'react-text-marquee';
import ReactDOMServer from 'react-dom/server';
class Session extends React.Component {
constructor(props) {
super(props);
this.state = {
"showConceptLogo" : true,
"logo" : "logo",
"filmTitle": "2D Justice League",
"classification": "PG",
"sessionAttributes": [
{
"key": "VMAX",
"text": "VMAX",
"color": "yellow",
"background": "red"
},
{
"key": "Gold",
"text": "Gold"
},
{
"key": "Vjnr",
"text": "Vjnr"
},
{
"key": "VPrem",
"text": "VPrem"
},
{
"key": "FWTC",
"text": "FWTC"
},
{
"key": "CC",
"text": "CC"
}
],
"screeningTime": "4:00PM"
}
}
RenderAttributesElement(attr) {
return (
<span style={{color: attr.color, backgroundColor: attr.background}}>{attr.text} </span>
);
}
ConceptLogo(props) {
if (props.display) {
return (
<div className="col-md-1">
<h2>{props.logo}</h2>
</div>
);
}
return null;
}
render() {
return (
<div className="row">
<this.ConceptLogo logo={this.state.logo} display={this.state.showConceptLogo} />
<div className="col-md-6">
<h2>{this.state.filmTitle}</h2>
</div>
<div className="col-md-1">
<h2>{this.state.classification}</h2>
</div>
<div className="col-md-3">
<Marquee hoverToStop={true} loop={true} leading={3000} trailing={3000} text={this.state.sessionAttributes.map(this.RenderAttributesElement)} />
</div>
<div className="col-md-1">
<h2>{this.state.screeningTime}</h2>
</div>
</div>
);
}
}
export default Session;
Both of following options basically just hide the warning.
Option 1: change type of the text prop in runtime:
import PropTypes from 'prop-types';
Marquee.propTypes.text = PropTypes.oneOfType([
PropTypes.string,
PropTypes.array,
]);
However, this might pose a problem if the author of the library decides to make a change that will render your usage of their component incorrect.
Option 2: fork the repository, change propTypes field in source, and, after updating the version in package.json of the library, setup a link to it in your project's package.json:
"react-text-marquee": "git://github.com/yourusername/react-text-marquee"
After that you run npm install and now you have to maintain your copy of the library in case the author does bugfixes or something like that. You might even describe prop type better and make a pull request to the original repository.

Categories