Im trying to change the background image of my application depending on API response, but the first thing i need to figure out is how can i have an image background covering the whole application when i have 3 components rendering header, main and footer?
Any help is appreciated.
const Main = () => {
return(
<div className='background'> //set background image
//import components here
</div>
)
}
I am sure you are importing them to a Main/Prent component. Add background image to the div in Parent and import components inside that div.
Related
I am using #tippyjs/react": "^4.2.6 & the problem is that react-tippy not being positioned properly on sidebar of our dashboard, whenever there is content more than screen height and is scrollable the tippy button is placed more above than it is supposed to.
For example, when there is very little content on the right and there is no scroll bar tippy tool is positioned properly as shown in the image below:
But whenever there is more content than the screen height on the right and scroll bar appears tippy tool seems to be positioned wrong (A bit above than the button) as shown in image:
I checked multiple ways to figure / fix this but wasn't able to
The code I'm using is this for the button tippy tool is this:
import React from "react";
import Tippy from "#tippyjs/react";
const TippyReload = props => {
return (
<Tippy
animation="fade"
theme="custom"
content="Refresh Count"
placement="top"
arrow={true}
className={`custom-tippy`}>
{/* Wrap this component over the refresh icon, so this will be the refresh icon */}
{props.children}
</Tippy>
);
};
export default TippyReload ;
I want to create an image slider in react js which works like a banner advertisement that has images and something is written in it. But have no idea how is it done. I have the following code
rrr.jsx
import React from 'react'
import img44 from '../../Assets/pic46.png'
import img45 from '../../Assets/pic47.png'
import img46 from '../../Assets/pic48.png'
const rrr = () => {
return (
<div>
<div className="banner" >
<img src={img44} alt="banner" />
<img src={img45} alt="banner" />
<img src={img46} alt="banner" />
</div>
</div>
)
}
export default rrr
Also, the picture for what I wanted is :
In this way, I would like to slide up to three pictures but don't have an idea how we do it. So, it would be good if someone would teach me.
For now, I have only the image and nothing written in it like . So, it would be good if someone would teach me how to make an image slider with banner advertisement.
With react you can use framer-motion
A production-ready motion library for React
In the docs It has a great example of building slide components uses AnimatePresence exit animations
I would like to slide up
The above example slide to the left, right. If you want to slide you can modify the variants from x to y.
I am using the react-vector-maps library to import JSON data into an SVG component so that I can listen for the clickable paths and this is working well.
import { VectorMap } from '#south-paw/react-vector-maps';
How though, can I modify this component so that it renders with an <image> tag?
<VectorMap {...Slide1map} layerProps={layerProps} width={950} />
I tried
<VectorMap {...Slide1map} layerProps={layerProps} width={950} src='image1.png' />
and I tried
<VectorMap {...Slide1map} layerProps={layerProps} width={950} href='image1.png' />
.... but this does not have the effect of loading the image. I have tried to make a background-image using CSS, but this is not responsive. Perhaps there is a way of making a responsive background image which would be feasible? Any ideas very welcome.
im having problem with ReactJS, i
on index.js i have:
ReactDOM.render([<App />, <Footer />], document.getElementById('root'));
the problem is that Footer needs to add an 80px padding from the bottom only on certain pages
so on the render method i do
<div>
{isMobile && window.location.pathname.startsWith('/summary') &&
<div style={{height: 80}}></div> }
</div>
but it doesn't re-render when window.location.pathname changes,
i move around the web app and it doesn't change only when i hit F5 it renders correctly on that page.
i tried using events on window but they're aren't invoked as well...
window.addEventListener('locationchange', function(){
console.log('xxxxxxx location changed!');
})
window.addEventListener('hashchange', function(e){console.log('xxxxxx hash changed')});
window.addEventListener('popstate', function(e){console.log('xxxxxxx url changed')});
how i can make it re-render? or make Footer work as React component that can render ?
This is a common problem!
Out of the box, React is configured to operate on a single page (see Single Page Applications), which basically means it deletes what's shown on screen and renders new information when an update is required.
Naturally, simulating the routing behavior that's observable for non Single Page Apps is a little more difficult - check out React Router, which is a library created to tackle this exact issue.
I'm trying to have popup window with YouTube video that not affect the main page.
I can still interact with the main page, similar on this web site when you click track you have small popup video on right bottom corner.
I have App.js with YouTube API
{
getYouTubeApi = (searchTerms1, searchTerms2) => {
fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=10&q=${searchTerms1} ${searchTerms2}&type=video&key=YOUR_KEY`)
.then(res=>res.json())
.then(data=>{
this.setState({videoId: data.items[0].id.videoId})
})
.catch(error=>console.log(error))
}
render(){
return (<YouTube opts={opts} videoId={this.state.videoId} />)
}
}
getYouTubeApi function I call on click on track that just bring to the top of my page where YouTube video loads.
Here is my school project.
Since this describes DOM behavior more than business logic, you could put in whatever you want in a specific component that behaves like a modal (whether by swapping out css classes or setting inline styles based on certain conditions).
To make this modal reusable, I'll suggest you make it a higher order component to wrap around <Youtube /> component or any other component you want to display with modals.
For example, you could have
const Modal = (ComponentToDisplayAsModal, props) => (
<div class="modal">
<ComponentToDisplayAsModal {...props} />
</div>
)
You could then style the modal class to behave like a modal.
On the view you wish to show your modal, you could render
Modal(Youtube, props)