We Keep Coding

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;

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.

I can't export the array I have created in one of my react components

I have been trying to export this array to dynamically render on another page (based on input from fakeApi) within my app and can't get it to work. I'm new to react and not sure if this is the correct way to achieve what I want.
Basically, I would like the full api (yet to create just using fake one for testing) to appear on one page (which is working). Then based on the information received from the array show which networks are down on the homepage of my app. Any help is much appreciated. Please see code.
import NetworkComponent from './NetworkComponent';
let fakeApi = [
{
key: 1,
HostIPAddress: "1.1.1.1",
HostFriendlyName: "BBC",
HostMonitored: "down",
HostType: "VPN"
},
{
key: 2,
HostIPAddress: "8.8.8.8",
HostFriendlyName: "johnlewis.co.uk",
HostMonitored: "ok",
HostType: "VPN"
},
{
key: 3,
HostIPAddress: "2.3.4.5",
HostFriendlyName: "hello.co.uk",
HostMonitored: "down",
HostType: "VPN"
},
];
const NetworkScan = () => {
return (
<div>
<h1>Network Monitor</h1>
<div className="container mx-auto">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
{fakeApi.map(service => (
<NetworkComponent key={service.key} service={service} />
))}
</div>
{fakeApi.forEach((service) => {
if(service.HostMonitored === "down") {
let networkErr = [];
networkErr.push(service.HostMonitored, service.HostFriendlyName, service.HostIPAddress)
console.log(networkErr);
}
})};
</div>
</div>
);
};
export default NetworkScan;

You can export it as object export { fakeApi } and import it as import { fakeApi } from '../..'

Put that array object into a .json file (i.e. fakeApi.json) and import it like import fakeApi from './fakeApi.json' wherever you want.

Could not get animation to work with AMP and React

I am working on a React AMP project where I need to do some tweaky animation with AMP to show and hide a button when the window is scrolled.
As AMP Animation tag expects an object in the children on <amp-animation> but React does not allows object as it's children.
Here is the code I am trying with:
import React from 'react';
const showAnim = {
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [
{
"selector": "#download-button",
"keyframes": [
{ "opacity": "1", "visibility": "visible" }
]
}
]
}
const hideAnim = {
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [
{
"selector": "#download-button",
"keyframes": [
{ "opacity": "0", "visibility": "hidden" }
]
}
]
};
export default class Animate extends React.Component {
componentDidMount() {
window.addEventListener('scroll', this.onScroll)
}
onScroll = () => {
console.log('scrolling')
}
renderShowAnimation = () => <amp-animation id="showAnim" layout="nodisplay" src="">
<script type="application/json">
{showAnim}
</script>
</amp-animation >;
renderHideAnimation = () => <amp-animation id="showAnim" layout="nodisplay">
<script type="application/json">
{hideAnim}
</script>
</amp-animation >;
render() {
return (
<main onScroll={this.onScroll} >
<div>
{this.renderShowAnimation()}
{this.renderHideAnimation()}
<div className="download-button" id="download-button" role="button">
Download
<amp-position-observer
on="enter:hideAnim.start; exit:showAnim.start"
layout="nodisplay">
</amp-position-observer>
</div>
</div>
</main>
)
}
}
Now when I am trying to run the app I am getting the following error:
Objects are not valid as a React child (found: object with keys {duration, fill, iterations, direction, animations}).
I tried to put an onScroll event also but it is also not working in AMP.
If someone has an aleternative or if something is wrong in my code please suggest.

amp-animation expects a JSON as a child, not a Javascript object. (They are similar in syntax, but different.) Even though you wrote the object in JSON syntax, showAnim and hideAnim end up interpreted as objects by javascript. You can convert them to JSON with JSON.stringify().
Simplifying your issue for a second, if you look at one of their examples.
<amp-animation layout="nodisplay">
<script type="application/json">
{
"selector": "#target-id",
"duration": "1s",
"keyframes": {"opacity": 1}
}
</script>
</amp-animation>
The problem is if you paste this into the render method of React, you'll get errors because the { escapes the jsx and it now expects javascript. One way to fix this is to use React's dangerouslySetInnerHTML.
<amp-animation layout="nodisplay">
<script type="application/json" dangerouslySetInnerHTML={{__html:
JSON.stringify(
{
"selector": "#target-id",
"duration": "1s",
"keyframes": {"opacity": 1}
}
)
}}>
</script>
</amp-animation>
In your case, you can change your two functions to
renderShowAnimation = () => <amp-animation id="showAnim" layout="nodisplay" src="">
<script type="application/json" dangerouslySetInnerHTML={{__html: JSON.stringify(showAnim)}}>
</script>
</amp-animation >;
renderHideAnimation = () => <amp-animation id="showAnim" layout="nodisplay">
<script type="application/json" dangerouslySetInnerHTML={{__html: JSON.stringify(showAnim)}}>
</script>
</amp-animation >

AMP not allow define custom javascript (unlimited js) and custom event listener except on attribute). You can implement some dynamic functionality in AMP with amp-bind component and amp-script component

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.