I'm trying to use tsparticles, and I followed the following steps:
I first installed the package using npm install react-tsparticles.
Then I created a component including two files, the particles component:
import React from 'react';
import Particles from 'react-tsparticles';
import ParticlesOptions from './ParticlesOptions';
const ParticlesBackground = () => {
return (
<div>
<Particles params={ParticlesOptions}>
</Particles>
</div>
)
}
export default ParticlesBackground;
And the particles options:
const ParticlesOptions = {
fps_limit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onClick: {
enable: true,
mode: "push"
},
onHover: {
enable: true,
mode: "repulse"
},
resize: true
},
modes: {
push: {
particles_nb: 4
},
repulse: {
distance: 200,
duration: 0.4
}
}
},
particles: {
color: {
value: "#ffffff"
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.4,
width: 1
},
move: {
bounce: false,
direction: "none",
enable: true,
outMode: "out",
random: false,
speed: 2,
straight: false
},
number: {
density: {
enable: true,
area: 800
},
value: 80
},
opacity: {
value: 0.5
},
shape: {
type: "circle"
},
size: {
random: true,
value: 5
}
},
detectRetina: true
}
export default ParticlesOptions
I imported the component into my App.js properly as I see no errors, but I still see no particles on my website. Again as I mentioned, no errors are displayed! Here's my App.js:
import React, {Component} from 'react';
import ParticlesBackground from './components/particles/ParticlesBackground';
import Clarifai from 'clarifai';
import Navigation from './components/navigation/Navigation';
import Logo from './components/logo/Logo';
import ImageLinkForm from './components/imageLinkForm/ImageLinkForm';
import Rank from './components/rank//Rank';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<ParticlesBackground />
<Navigation />
<Rank />
<Logo />
<ImageLinkForm />
</div>
);
}
}
export default App;
The whole App is displayed properly, and my background isn't white as I found people who have the same problem and turns out that because of the background color they just couldn't see the particles.
I fixed my vulnerabilities and reinstalled my packages properly, but it's still not working!
I also tried to use react-particles-js package instead, but it gives me 'module not found' errors.
Any other suggestions? Hope u could help!
I think you are using version 2.0.6 or similar version, that has some additional steps.
You can find everything in the official documentation: https://github.com/matteobruni/tsparticles/tree/main/components/react#how-to-use
This is what you are missing
const particlesInit = async (main) => {
// you can initialize the tsParticles instance (main) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
await loadFull(tsParticles);
};
And you have to use it in the init attribute like this:
<Particles id="tsparticles" options={options} init={particlesInit} />
Related
How to use custom theme correctly with component lib that uses Material UI (I don't want to wrap with them all components).
import { createMuiTheme } from '#material-ui/core/styles';
const theme = createMuiTheme({
palette: {
primary: {
main: '#1976d2'
},
success: {
main: '#4caf50'
}
},
typography: {
fontSize: 16,
h3: {
fontWeight: 700,
fontSize: '2.2rem'
},
h4: {
fontWeight: 700,
fontSize: '1.75rem'
},
h5: {
fontWeight: 500
},
h6: {
fontWeight: 500
}
}
})
export default theme;
I have only one index file where export all my components as usual lib does. How can I wrap all my components with the theme without doing it everywhere? Or is there better way to customize styles?
You can wrap your App.tsx file (or _app.tsx if you use Next.js) in ThemeProvider and provide your theme:
https://mui.com/customization/theming/
I've just started using the react-elastic-carousel package and am running into an issue on page load. Everything loads up on page load/refresh, but when I click the arrow to move the carousel, the items aren't rotating. Only upon resizing the window do the products re-format correctly, and then I can continue to use the buttons normally from then on. I've commented out all of my CSS thinking that it was maybe clashing with the package's CSS but it did nothing. I know that this package uses Resize Observer, but am not sure if that would be the issue or not. I've attached my code for the component that's using the carousel as well as a link to the Github of the react-elastic-carousel package. Any direction or advice is appreciated!
import React from 'react';
import axios from 'axios';
import RelatedProducts from './RelatedProducts.jsx';
import OutfitList from './OutfitList.jsx';
import Carousel from "react-elastic-carousel";
//Custom styles for carousel//
const breakPoints = [
{ width: 1, itemsToShow: 1 },
{ width: 550, itemsToShow: 2 },
{ width: 768, itemsToShow: 3 },
{ width: 1200, itemsToShow: 4 },
];
class RelatedProductsList extends React.Component {
constructor(props) {
super(props);
this.state = {
products: []
}
this.getRelated = this.getRelated.bind(this);
}
componentDidUpdate(prevProps) {
if (prevProps.mainProduct.id !== this.props.mainProduct.id) {
this.getRelated()
}
}
getRelated() {
axios.get(`/api/${this.props.mainProduct.id}`)
.then((results) => {
this.setState({
products: results.data
})})
.catch((err) => console.log(err));
};
render() {
return (
<div>
<Carousel breakPoints={breakPoints}>
{this.state.products.map((id, index) => {
return (
<RelatedProducts productId={id} key={index} mainProduct={this.props.mainProduct} updateCurrentProduct={this.props.updateCurrentProduct}/>
)
})}
</Carousel>
</div>
);
}
};
export default RelatedProductsList;
Github of the carousel package
I have a graph in my application, which was created with Chart.js library. My graph.js file looks like this:
import { Line, mixins } from 'vue-chartjs';
const { reactiveProp } = mixins;
export default {
extends: Line,
mixins: [reactiveProp],
data() {
return {
options: {
maintainAspectRatio: false,
responsive: true,
legend: {
display: true,
position: 'bottom',
},
scales: {
yAxes: [
{
ticks: {
suggestedMin: 0,
callback(tick) {
return `${tick}%`;
},
},
},
],
},
tooltips: {
callbacks: {
label(tooltipItem, data) {
const dataset = data.datasets[tooltipItem.datasetIndex];
const currentValue = dataset.data[tooltipItem.index];
return ` ${dataset.label}: ${currentValue}%`;
},
},
},
},
};
},
mounted() {
this.renderChart(this.chartData, this.options);
},
};
And the component responsible for rendering it (i've cut some irreleveant details):
<template>
<div
class="container">
<b>
...
</b>
<div
class="graph">
<graph
:styles="graphStyle"
:chart-data=graphData">
</graph>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import Graph from './graph';
import {
...
} from '../../constants';
export default {
name: '...',
components: {
Graph,
},
data() {
return {
...
};
},
watch: {
...
},
methods: {
...
},
computed: {
...
},
};
</script>
I would like to export it to svg, and then post it to my api. I need to serialize it into a string and then send with post method, in json body. Do i have to use some another external library? How can i serialize it to svg? Thanks for any answers.
If png is acceptable for you, there might be a way to do it. Keep in mind that I haven't tested this, but it should work by the looks of it.
Looking at the documentation of vue-chartjs, here it says that you can access the chartjs object with:
this.$data._chart
From there, you should be able to use its method for saving the chart as a png - toBase64Image():
this.$data._chart.toBase64Image()
I use Vue2Leaflet
and Leaflet-semicircle. I don't have a problem when using Vue2Leaflet, but I don't know how to use Leaflet-semicircle in my VueJS project.
<script>
import { latLng } from "leaflet";
import { LMap, LTileLayer, LMarker, LCircleMarker, LPopup, LTooltip } from "vue2-leaflet";
import { mapGetters } from 'vuex';
import moment from 'moment';
import 'leaflet-semicircle';
export default {
name: 'Map',
components: { LMap, LTileLayer, LMarker, LCircleMarker, LPopup, LTooltip, LSemicircle },
data() {
return {
map: null,
zoom: 12,
center: latLng(53.88694, 27.554572),
url: 'http://192.168.1.1/osm-tiles/{z}/{x}/{y}.png',
withPopup: latLng(53.88694, 27.524572),
withTooltip: latLng(53.88694, 27.565572),
currentZoom: 12,
currentCenter: latLng(53.88694, 27.554572),
showParagraph: false,
mapOptions: {
zoomSnap: 0.5
},
showMap: true
};
},
mounted() {
this.map = this.$refs.map.mapObject;
this.$nextTick(() => {
this.map = this.$refs.map.mapObject;
});
},
updated() {
L.semiCircle(latLng(53.88694, 27.554572), { // not working
radius: 5000,
startAngle: 45,
stopAngle: 360
}).addTo(this.map);
},
computed: {
...mapGetters('targetControl', { events: 'getEvents'}),
},
...
...
}
</script>
I resolved this problem:
import L from "leaflet";
import 'leaflet-semicircle';
latLng changed by L.latLng
I just didn't have L function from leaflet
Sorry, it's probably not exact answer you need but still.
I see a few options:
1) Check sources https://github.com/vue-leaflet/Vue2Leaflet/blob/master/src/components/LCircle.vue and based on that component create your own (API from Leaflet-semicircle says that is shouldn't be a headache )
2) Check page https://vue2-leaflet.netlify.com/plugins/ there are a list of plugins. The closest one is probably https://github.com/ais-one/vue2-leaflet-tracksymbol It added another leaflet plugin functionality to vue2leaflet
and by analogy create your own plugin for that
3) the hacky one. You can override the original circle component on leaflet class (I do not recommend to do that, but it's still an option)
I am trying to build a new react-native application using react-native-navigation. earlier we have an application which is using v2.x of react-native-navigation and I am able to work with the navigation properly, where the notch and statusBar was properly getting handled by the navigation. But with version 6.x i am not able to hide the statusBar, or you can say draw behind the statusBar. See the screenshot below with old and new app.
here is the code snippet from the MainActivity (same in both the applications (old and new)).
public class MainActivity extends NavigationActivity {
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
layoutParams.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
getWindow().setAttributes(layoutParams);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
}
super.onCreate(savedInstanceState);
}
}
index.js
/**
* #format
*/
import App from './App';
App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import { Navigation } from 'react-native-navigation';
import { WelcomePage } from './src/screens/welcome.page';
import { StatusBar } from 'react-native';
Navigation.registerComponent(`Pages.WelcomePage`, () => WelcomePage);
StatusBar.setHidden(true);
Navigation.events().registerAppLaunchedListener(async () => {
Navigation.setDefaultOptions({
popGesture: false,
topBar: {
topMargin: 0,
visible: false,
drawBehind: true,
animate: false,
height: 0
},
layout: {
orientation: 'portrait',
backgroundColor: 'white',
componentBackgroundColor: 'white',
fitSystemWindows: true,
topMargin: 0,
},
statusBar: {
drawBehind: true,
visible: false,
backgroundColor: 'transparent',
style: 'light'
},
});
return Navigation.setRoot({
root: {
component: {
name: 'Pages.WelcomePage',
},
},
});
});
welcome.page.js
import React, { Component } from 'react';
import { StatusBar, Text, View } from 'react-native';
class WelcomePage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<>
<StatusBar hidden={true}/>
<View style={{backgroundColor: '#556677', justifyContent: 'center', alignItems: 'center', flex: 1}}>
<Text>Hello World</Text>
</View>
</>
);
}
}
export { WelcomePage };
Device with Notch (New Application) RNN v6.x
Device with Notch (Old Application) RNN v2.x
Device without Notch (New Application) RNN v6.x
Device without Notch (Old Application) RNN v6.x
please help me understand what is changed between these two versions in terms of layout handling and how I can achieve, what i was able to achieve with the older version of react-native-navigation.
As per React Navigation v6 docs you can hide the status bar with FocusAwareStatusBar if you are using a tab navigator
function FocusAwareStatusBar(props) {
const isFocused = useIsFocused();
return isFocused ? <StatusBar {...props} /> : null;
}