<Parallax pages={2} ref={ref}>
<ParallaxLayer offset={0} speed={1} factor={2}>
<Snowfall snowflakeCount={35} color={'#53bdfc'} />
<section className='hero-section'>
<div className='container'>
<div
className='hero-main'
style={{ backgroundImage: `url(${background})` }}
>
<div className='hero-text'>
<motion.h1
>
Community{' '}
<motion.span
>
First
</motion.span>
</motion.h1>
<motion.p
>
Text
</motion.p>
</div>
<motion.img
src={HeroImage}
alt='hero_image'
/>
</div>
</div>
<Footer />
</section>
</ParallaxLayer>
<ParallaxLayer
offset={0}
speed={1}
style={{
backgroundImage: `url(${SeaBackground})`,
backgroundSize: 'cover',
zIndex: -2,
}}
/>
</Parallax>
This is in my App.js.
The thing is, if I change something from the code and not hit refresh, the parallax is working. But if I refresh, then it stops working.
Is this some kind of mounting issue? Any help would be greatly appreciated!
I also faced the same issue today and I downgraded react version 18 to 17.0.2 everything works fine so far.
Related
I'm using react for a project where I'm using a React-Bootstrap Snipper. but Its very tiny and now I want to change its size now. How can I change it?
<div
style={{ width: "200px", height: "200px" }}
className="w-100 d-flex text-[#DC2626] justify-content-center align-items-center">
{/* bootstrap spinner */}
<Spinner animation="border" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
</div>
You can pass the width and height to the spinner component.
codesandbox link - https://codesandbox.io/s/broken-surf-vids1x?file=/src/App.js
<Spinner animation="border" role="status" style={{ width: "4rem", height: "4rem" }}>
<span className="visually-hidden">Loading...</span>
</Spinner>
You can also directly use the size tag to change the size
<Spinner animation='border' size='sm' className='mr-2' />
xs (extra small), sm (small), md (medium), lg (large), and xl (extra large)
I'm trying to create a swipeableDrawer like that.
I want a button on my swipeableDrawer which I could click to dispatch an action.
But I can't click the button and swipe the swipeable drawer at the same time.
I want it.
<Global styles={{
'#swipeable .MuiPaper-root': {
height: `calc(78% - ${drawerBleeding}px)`,
overflow: 'visible',
},
}}/>
<SwipeableDrawer
id={'swipeable'}
anchor="bottom"
open={open}
onClose={toggleDrawer(false)}
onOpen={toggleDrawer(true)}
swipeAreaWidth={100}
disableSwipeToOpen={false}
ModalProps={{
keepMounted: true,
}}>
<>
<Card>
<CardContent>
<div className="row">
<div className="col-12">
{!ricalcolaPremioBTNEnabled ?
<Button className={buttonClasses.root}
onClick={() => history.push(INFO_PERSONALI_PATH)}>CONTINUA</Button> :
<Button className={buttonClasses.root}
disabled={!ricalcolaPremioBTNEnabled}
onClick={handleRicalcolaPremio}>RICALCOLA</Button>}
</div>
</div>
</CardContent>
</Card>
</>
<div style={{height: '100%', marginTop: '3vw', overflowY: 'auto', overflowX: 'hidden'}}>
<div className="row p-3">
Content of swipeable drawer
</div>
</div>
</SwipeableDrawer>
</Global>
How can I fix it?
Your button just probably inherits the pointer-events: none CSS from the <SwipeableDrawer/>.
You can override this CSS but you may encounter this issue
How I can do something like planet on this link with help ScrollMagic in React?
My code
<div className={styles.containerMain}>
<div>
<Controller>
<Scene duration={300} triggerElement="#first-container" offset={500}>
{(progress) => (
<Tween
from={{
css: {
top: '0',
},
ease: 'Circ.easeOutExpo',
}}
to={{
css: {
top: '-500px',
},
ease: 'Circ.easeOutExpo',
}}
totalProgress={progress}
paused
>
<div id="first-container" style={{ height: '100vh', position: 'relative' }}>
<div className={styles.container}>
<div className={styles.contentContainer}>
<div className={styles.textSmall}>We</div>
<div className={styles.textLarge}>Deliver</div>
<div className={styles.containerText}>
<div className={styles.textSmall}>Quality</div>
<div className={styles.textSmall}>Software </div>
</div>
<div className={styles.textLarge}>Globally</div>
<div className={styles.globe}>
<Globe /> //this is image svg
</div>
</div>
</div>
</div>
</Tween>
)}
</Scene>
</Controller>
</div>
</div>
I need:
I see part of my image and than I am scrolling and I see full of my image (image replace text), than do something like in link
I need to add link to my logo image.I mean when ever I click my logo image it should redirect to dashboard page.I tried to do it using anchor tag but it is not working properly
<Header className='header' style={{ position: 'fixed', width: '100%' }}>
<div className='header-logo' style={{ width: collapsed ? 80 : 200, height: 0 }}>
{collapsed &&
<a href="/dashboard">
<img src={minLogo} alt='Logo' />
</a>
}
{ !collapsed &&
<span> </span>
}
</div>
<Icon
className="trigger"
type={collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggleSideBar}
/>
<div style={{ display: 'inline-block', float: 'right' }}>
<Dropdown overlay={menu} placement="bottomRight">
<Avatar icon='user' />
</Dropdown>
</div>
</Header>
Try this
import { Link } from "react-router-dom";
<Link to="/dashboard">
<img src={minLogo} alt='Logo' />
</Link>
User router Link instead of anchor:
<Link to="/dashboard">
<img src={minLogo} alt='Logo' />
</Link>
I'm currently trying to learn the basics of React so I thought I'd try to mock-up another website. Currently, I'm trying to build a header that looks like Airbnb's
Unfortunately, I can't seem to figure out the aligning and how to get the logo to be all the way on the left side.
Any advice would be appreciated! Thanks!
<Flexbox flexDirection="column">
<Flexbox element="header" height="60px">
<div style={{ flexGrow: 0}}>
<img src={Logo} />
</div>
<div style={{flexGrow: 8}}>
<SearchBar
onChange={() => console.log('onChange')}
onRequestSearch={() => console.log('onRequestSearch')}
style={{
margin: '0 auto',
maxWidth: 800
}}
/>
</div>
<div>
<Button>Become a host</Button>
</div>
<div>
<Button>Sign up</Button>
</div>
<div>
<Button>Log in</Button>
</div>
</Flexbox>
</Flexbox>