i am very new to React, i am trying to use react slick, so as to achieve image as background with carousel . but when i try to do it, i am getting blank instead of image. i cannot see my inline style as well when i inspect. but if i use tag that is showing the image.
below is the code
import React, { Component } from 'react';
import './home.css';
import Slider from "react-slick";
import image2 from '../../images/image2.jpg';
import image1 from '../../images/image1.jpg';
import image3 from '../../images/image3.jpg';
class Home extends Component{
render(){
let pics = [
{"name":"pic_1",
"url": image1
},
{"name":"pic_2",
"url": image2
},
{"name":"pic_3",
"url": image3
}
]
let settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
}
return(
<div >
<Slider {...settings}>
{pics.map((picture, i)=>{
return(
<div key={i} style={{
backgroundSize: 'cover',
border: 'none',
height: '100vh',
backgroundImage: `url(${picture.url})`
}}>
<div>
{picture.name}
</div>
</div>
)
}
)
}
</Slider>
</div>
)
}
}
export default Home;
i try going through this answer Setting a backgroundImage With React Inline Styles but this didn't resolve my problem.
thanks in advance!
Slick changes the css style of the root element of each slide.
Add your actual slide image as a child of each slide's first element.
This way it works for me:
<Slider {...settings}>
{slideshowImages.map((image, index) => (
<div key={index} style={{width: '100%', height: '400px'}}>
<div
style={{
backgroundImage: `url(${image.url})`,
width: '100%',
height: '400px',
backgroundSize: 'cover',
backgroundPosition: 'center'
}} />
</div>
))}
</Slider>
Note that I am setting the same width & height to the root element of each slide and its child element holding the image. These dimensions may not work for you specific slideshow.
Related
I am implementing the exact same code shown in the material-ui library documentation here
https://mui.com/x/react-data-grid/layout/#flex-layout
I am trying to implement the flex layout,
I just did the exact same steps and the console shows the error all the time:
Sandbox:
https://stackblitz.com/edit/react-8ahs3n?file=src/App.js
Please help, appreciated.
In the documentation example you linked to there is one additional div wrapping what you have in your code: <div style={{ height: 400, width: '100%' }}>. Including that wrapper element (which gives the element an intrinsic height as mentioned in the console warning) gets rid of the console error. Here's a modified version of your stackblitz that does not have the error: https://stackblitz.com/edit/react-m2uoq1?file=src%2FApp.js.
The 400px height in the documentation example can be replaced by whatever height you want -- it just can't be percent-based. If you want the DataGrid to be the full height of the browser, you can use 100vh instead of 100%.
Here's an example:
import * as React from "react";
import { DataGrid } from "#mui/x-data-grid";
import { useDemoData } from "#mui/x-data-grid-generator";
import CssBaseline from "#mui/material/CssBaseline";
export default function FlexLayoutGrid() {
const { data } = useDemoData({
dataSet: "Commodity",
rowLength: 50,
maxColumns: 6
});
return (
<>
<CssBaseline />
<div style={{ height: "100vh", width: "100%" }}>
<div style={{ display: "flex", height: "100%" }}>
<div style={{ flexGrow: 1 }}>
<DataGrid {...data} />
</div>
</div>
</div>
</>
);
}
In my example I included the CssBaseline component in order to get rid of the default 8px margin on the <body> element -- otherwise using 100vh will cause a scroll bar to appear; however the default margin (or a custom margin in your app) can be accounted for in other ways by using calc (e.g. height: "calc(100vh - 16px)").
Use a wrapper component such as Box from Material UI with flex display and height:
<div style={{ height: 400, width: '100%' }}>
<Box style={{
display: "flex",
height:400,
justifyContent: "center",
alignItems: "center"
}}
>
<Datagrid/>
</Box>
</div>
I have a image component inside a view called container I don't want that image component to leave the view or container
`
<View style={styles.container>
{/* <View style={styles.line}><Text>Hi</Text></View> */}
<Image source={require('../assets/genre/Hip-pop.png')} style={styles.image}/>
</View>
`
container Style
`
container:{
width:150,
height:100,
backgroundColor:"red",
borderRadius:4,
},
`
Image style
`
image:{
width: 50,
height:50,
bottom:-20,
marginLeft:100,
top:54,
left:20,
resizeMode:"contain",
position:'absolute',
// transform: [{rotate:'180deg'}]
}
`
I try setting the image component position to absolute but that didn't work the image still move out side it parent rather then be cutoff or consume by the parent container
image:{
width: 50,
height:50,
bottom:-20,
marginLeft:100,
top:54,
left:20,
resizeMode:"contain",
position:'absolute',
// transform: [{rotate:'180deg'}]
}
I'm stuck and can't place the background image on my next JS app.
Here is my code.
globals.css
.container {
padding: 0 2rem;
background-image: url(../public/images/landing-page-illustration.svg);
}
index.js
import Head from 'next/head'
import Image from 'next/image'
import Navbar from '../components/navbar';
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Navbar/>
</div>
);
}
You just need to do this. It works for me. Update the tailwind class with your css.
<div className="relative"> <!--position: 'relative' -->
<Image
src="image path"
layout="fill"
objectFit="cover"
/>
<div className="w-full relative"><!-- position: 'relative' -->
<h2 className="text-center font-semibold text-4xl pb-8 pt-14 text-pink-600">hello</h2>
</div>
</div>
The height of background will increase according to the content. You can fix the height by
height:'80vw'
I also stuck in this problem then I just used next-images and declare this in the jest.config.js file like this -
module.exports = {
async redirects() {
return [
{
...
},
];
},
reactStrictMode: true,
future: { webpack5: true },
images: {
domains: ['https://...'],
},
};
const withImages = require('next-images');
module.exports = withImages();
and just used<img /> tag to render the image
<img
src={Wave}
style={{
zIndex: -1,
width: '100%',
position: 'absolute',
}}
className='md:bottom-px origin-center rotate-180 md:rotate-0 '
alt=''
/>
I want to create something such that, depending on the state, a given div appears overlapping another div from the right side, here is my code:
const [loggedIn, setLoggedIn] = useState<boolean>(false);
const [hasConfirmedAccount, setHasConfirmedAccount] = useState<boolean>(false);
return (
<>
<div style={{ width: "100%" }}>
<div style={{ float: "left", width: "50%" }}>
<div
style={{ width: "100%", height: "100vh", backgroundColor: "#fafafafa" }}
></div>
</div>
<div id='notLoggedIn' style={{ float: "right", width: "50%" }}>
{!loggedIn && (
<div>
WHEN LOGGED IN === TRUE
</div>
)}
<div
style={
loggedIn && !hasConfirmedAccount
? { width: "100%", transition: "ease-in-out 5s" }
: { display: "none" }
}
>
<div id="notConfirmedAccount">WHENE LOGGED IN === TRUE AND hasConfirmedAccount === FALSE</div>
</div>
</div>
</div>
</>
);
The code works fine, when loggedIn === true and hasConfirmedAccount === false div with id = notConfirmedAccount has been displayed instead of div with id=notLoggedIn, but displaying this div does not work flowing, I want a slow leaving effect of the div on the right side that would overlap the previous div
can someone tell me what to do this?
thanks for any help!
install animate.css => $ npm install animate.css --save
animate.css
2.import "./animate.css" at top your component or project
3.just put the name of aniamte on className like this pattern in your div
<div className={style.forgot} className='animate__animated animate__fadeInDown'>
also you should control your showing div with state
Use React animation Add-Ons ReactTransitionGroup and ReactCSSTransitionGroup
The ReactTransitionGroup add-on component is a low-level API for animation, and ReactCSSTransitionGroup is an add-on component for easily implementing basic CSS animations and transitions.
https://reactjs.org/docs/animation.html
Apparently I'm having such a hard time styling material-ui components, maybe it's my poor knowledge of the framework, nevertheless let's judge that when I'm done explaining the situation.
I have a landing page that displays a video as the background and what I want is to add other components to the center of that video screen like typographies.
here's my component:
import React, {Fragment, useState} from 'react'
import {createStyles, Grid, makeStyles, Typography} from '#material-ui/core'
import DrawerC from '../components/drawer'
import AppbarC from '../components/appbar'
import background from '../assets/background.mp4'
const useBackgroundStyle = makeStyles((theme)=>createStyles({
root:{
width: '100%',
height: '100%',
overflowX: 'hidden'
},
typographyMiddle:{
∎∎∎∎∎∎ SOME STYLING TO POSITION THE TYPOGRAPHY IN THE MIDDLE ∎∎∎∎∎∎
position: 'absolute',
∎∎∎∎∎∎ ------------------------------------- ∎∎∎∎∎∎
},
[theme.breakpoints.down('md')]:{
root:{
width: window.screen.width,
height: window.screen.height,
objectFit: 'cover',
objectPosition: '20% 0%',
overflowX: 'hidden'
}
}
}))
export default function () {
const backgroundStyle = useBackgroundStyle()
const [drawerState, handleDrawerState] = useState(false)
const [datepickerState, handleDatepicker] = useState(false)
return(
<Fragment>
<AppbarC handleDrawerState={handleDrawerState} handleDatepicker={handleDatepicker} />
∎∎∎∎∎∎ THIS IS THE PART OF THE CODE THAT MATTERS ∎∎∎∎∎∎
<video autoPlay='autoplay' muted loop id="myVideo" className={backgroundStyle.root}>
<source src={background} type="video/mp4" />
</video>
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: '100vh' }}
className={backgroundStyle.typographyMiddle}
>
<Typography className={backgroundStyle.typographyMiddle}> THIS IS A TEST </Typography>
</Grid>
∎∎∎∎∎∎ ------------------------------------- ∎∎∎∎∎∎
<DrawerC state={drawerState} handleDrawerState={handleDrawerState} />
</Fragment>
)
}
I tried this method which I saw in another stackoverflow question asked by someone else but all it did was to center the typography but it added extra white space to the page.
So the main questions I would like to know the answers to really are:
what is the best way to centralize an element which is not a part of the framework?
what is the best way to centralize a component that IS a part of the framework?
what is the best way to style an element/component and test it when using the framework?
how does the framework's styling work?
You should be able to use "position:relative" on the parent (wrapper) component and then use "position:absolute" on the child component and using % + vh you can place the child component anywhere within the parent component.