So I am trying to animate a container with an background image and some text. I have set a config of duration and opacity of 0 to an opacity of 1 but the component loads normally. I do have the component as part of a private route. Its the page that displays after loggin in.
to= {{opacity:1, marginTop:0 }}
config = {{delay:4000, duration:4000}}>
{(props) => (
<div style={props}>
<div style={{ backgroundImage: `url(${cancer})`}} className="container-img">
<h2> What is Cancer?</h2>
<p className="paragraph">
The dogmatic view of cancer has been around for a long time.
This view is called the Somatic Mutation Theory. This Theory is
believed that cancer arises from damaged DNA in the cells that
causes out of ccontrol growth.
</p>
<p className="paragraph">
New Evidence shows that Cancer is caused by the damage to the
mitochondria causing the cells to fall back on ancient pathways
of fermentation. Cancer cells ferment Glucose and/or Glutamine
for energy or ATP.
</p>
<p className="paragraph">
If Cancer is a genetic disease, then why when they did a
scientic experiment in the 1960's where they took the
mitochondria of a cancer cell and put it in a normal cell the
cell turned cancerous. This theory is called the Metabolic
Theory of Cancer.
</p>
</div>
</div>
)}
</Spring>
</>
);
};
You're passing SpringValues to a regular dom element:
<div style={props}>
What you want to be doing is passing them to an animated element:
// import { animated } from 'react-spring'
<animated.div style={props}>
As described in the docs
Related
I am writing a webpage using React. I implemented a swiper on the landing page using Swiper. Its slides include an image and a few text blocks, very typical.
The animation works completely fine and smooth for FireFox, Safari, Edge, etc. However, the swiping motion is very buggy in Chrome. After spending some time to figure out why, I found that the issue can be hot fixed by disabling Chrome ‘Use hardware acceleration when available’ setting option. I also tried enabling Swiper CssMode, but it is not helping.
The webpage is supposed to be smooth to public users, turning HW acceleration off is not a feasible cure. Did anyone encountered similar problems before who can give me some clue?
Another observation I have on my React page is that, upon refreshing the webpage, if I scroll down quickly to the bottom, everything down there (other page content and footer) is blank. They display correctly after 3 seconds of rendering. This problem only occurs in Chrome, with HW acceleration on as well.
<div className='Latest-Swiper Content-Container'>
<Swiper loop={true} navigation={true} id='Latest-Swiper'
// cssMode={true}
observer={true}
uniqueNavElements={false}
onAfterInit={(swiper) => initBackground(swiper)}
onRealIndexChange={(swiper) => updateBackground(swiper)}
modules={[Navigation, Pagination]}
pagination={{
enabled: true,
el: '.Latest-Swiper-Custom-Pagination',
renderBullet: (index, className) => {
return '<span class="' + className + '"></span>';
},
}}
>
{articles.map((article, index) =>
(
<SwiperSlide className={article.category}>
<div className='Latest-Swiper-Title-Wrapper'>
<p className='Latest-Swiper-Title Latest-Swiper-Title-Mobile'>{article.title}</p>
</div>
<div className='Latest-Swiper-Image-Wrapper'>
{/* Post image */}
<img className='Latest-Swiper-Image' src={'sample.jpeg'} alt='' />
</div>
<div className='Latest-Swiper-Desc-Wrapper'>
{/* Desc */}
{article.body}
</div>
</SwiperSlide>
)
)}
</Swiper>
<div className='Latest-Swiper-Custom-Pagination' />
</div >
Thanks in advance.
I have made a mini chat box on an application that sits about mid way down the site on the 3rd section. I'd like to have this chat box always scrolled to the bottom when people type. I am currently using the bellow:
ChatMessage.js
const messagesEndRef = useRef(null)
const scrollToBottom = () => {messagesEndRef.current.scrollIntoView({ behavior: "smooth", block: 'nearest', inline: 'start' })}
useEffect(scrollToBottom, [messageUser]);
return (
<>
<div className='text-left my-2 mx-2'>
<span className={`inline-block pr-4 pl-2 py-2 ${messageClass} rounded-lg`}>
<span className='text-xs'>{username}</span><br />
<span className='text-md font-bold'>{text}</span>
</span>
</div>
<div ref={messagesEndRef} />
</>
)
ChatBox.js
{messages && messages.map(msg => <ChatMessage key={msg.id} messages={msg} user={props.user} /> )}
This solution has an issue when the user is actually not on the chat box page. If the user is to scroll to the top or bottom of the website, each time a message occurs the user if forced up to the chat box. Is there a way that I can have just the chatbox itself scroll to bottom without affecting the users exploring the rest of the site?
I tried thinking of using an iFrame or something but that didn't seem like it would be the best solution.
Thanks in advance.
i think ChatBox component should have be set position: fixed and stay on bottom and user can minimize or expand ChatMessage component every they want chat or not.
I have a nextjs blog that I'm working on and one of the components I'm using is this card component:
function Card(props) {
return (
<div className="uk-card uk-card-default uk-width-1-2#m">
<div className="uk-card-header">
<div
className="uk-grid-small uk-flex-middle"
uk-grid
uk-scrollspy="cls: uk-animation-slide-left; repeat: true"
>
<div className="uk-width-auto">
<Image
alt="Profile Picture"
className="uk-border-circle"
src={props.pic}
height={200}
width={200}
/>
</div>
<div className="uk-width-expand">
<h3 className="uk-card-title uk-margin-remove-bottom">
{props.name}
</h3>
</div>
</div>
</div>
<div className="uk-card-body">
<p>{props.description}</p>
</div>
<div className="uk-card-footer">
</div>
</div>
)
}
I take that component and use it in the page like so:
export default Main =()=> {
return(
<Card
pic={placeholderpic}
linkedin='https://www.linkedin.com/'
name="Harry Truman"
description="Lorem ipsum"
/>
)
}
The icon in the footer does not render until the page is refreshed 3-4 times. All the rest of the card renders properly on first load. Ideally I'd like to know 3 things:
A. Why this is occurring?
B. How to troubleshoot this in the future?
C. What the most appropriate fix is for this.
Edit:
This question is essentially the same as mine:
Uikit Icons with React and Next.js
The solution for me is less than ideal, I don't want to wrap everything in a custom "UIKit" component.
I'd like to create the desired results as seen here.
Please view in Desktop widescreen. AirBnb results.
As you can see with the AirBnb results, the Map on the Righthand side sticks perfectly into place while allowing the user to scroll down to view the results on the Lefthand side.
I've been trying to figure out how they have achieved this but am reaching some road blocks. I found some luck with implementing this bit of code but there is still a slight amount of vertical scrolling before the bottom of the map snaps into place. I believe it has to do with the h-screen class making the map height: 100vh
<main className="flex">
{/* Results & Filters section - Left side */}
<section className='flex-grow'>
<div className='lg:inline-flex mt-5 mb-5 space-x-3 text-gray-800 whitespace-no-wrap'>
<p className='custom-button'>Cancellation Flexibility</p>
<p className='custom-button'>Type of Place</p>
<p className='custom-button'>Price</p>
<p className='custom-button'>Rooms and Beds</p>
<p className='custom-button'>More Filters</p>
</div>
<div className="flex flex-col">
{/* Search results */}
{searchResults.map(
({ img, location, title, description, star, price, total }) => (
<InfoCard
key={img}
img={img}
location={location}
title={title}
description={description}
star={star}
price={price}
total={total}
/>
))}
</div>
</section>
{/* Map section - Right side */}
<aside className="hidden h-screen w-[50%] sticky xl:inline-flex l:min-w-[600px] top-0">
<Map searchResults={searchResults} />
</aside>
</main>
Some help would be greatly appreciated. I've started a codesandbox to make it easier to see what I'm experiencing. Please view in Desktop widescreen
https://codesandbox.io/s/determined-bartik-2tftc?file=/pages/index.js
[Edit] : I just noticed the left side is hidden by the map now since the map is out of the flex flow. I'll keep the answer as an idea. If you can manipulate the architecture of the page, it's easy to fix.
Looks like applying :
position: fixed;
right: 0;
justify-content: end;
to the aside tag that contains the map and removing its top-0 class fix your problem. I see that you are using an external library to display the map so I don't know if there is a way to apply css to it since I can't edit the codesandbox sorry. You could just wrap it in a span with a class and target it with .my-class > aside in your css. But first check the documentation, they are probably exposing some classes for you to apply styles.
So I seemed to have solved this. Took a bit of work but I achieved the result I was looking for.
I added some root css here in globals.css file
:root {
--navigation-bar-offset: 90px;
--gp-placement-max-height: calc(100vh - var(--navigation-bar-offset, 80px));
}
I utilized these root class names to be used in index.js on the component parent div
<div className="w-full
sticky
top-[var(--navigation-bar-offset,80px)]
h-[var(--gp-placement-max-height,auto)]">
<MapBox searchResults={searchResults} />
</div>
I also found, that Mapbox was overriding my height from it's setViewport callback in Map.js. So I overrode Mapbox by adding this code in Map.js in the onViewportChange.
onViewportChange={nextViewport => setViewPort({ ...nextViewport, width: "100%", height: "100%" })}
I updated the Codesandbox to reflect these changes.
Also, if you resize the browser, it maintains height and width.
I am trying to create a scrolling carousel, similar to bootstrap's carousel, using pure React and inline styles.
I'm having a lot of trouble figuring out how state should be.
Here is the relevant code:
Parent component:
customers.jsx
<button style={{zIndex: 100}} onClick={() => this.renderPrev()}>Prev</button>
<ReactTransitionGroup transitionName="example">
{_.map(customers, (customer, i) => {
if (this.state.selected === i){
return <Customer
key={customer.name}
customer={customer}
selected={this.state.selected}
idx={i}
moving={this.state.moving}
toggle={()=>this.toggle()}
/>
} else {
return null
}
})
}
</ReactTransitionGroup>
<button style={{zIndex: 100}} onClick={() => this.renderNext()}>Next</button>
renderPrev/renderNext are simply functions that checks to see if the current selected customer is the first or last one, and if it is, then loop around.
Child component
customer.jsx
render() {
<div style={_.assign({},styles.root, position)}>
<div style={{verticalAlign: 'middle'}} >
<img style={styles.image} className="img-circle img-responsive" width="200px" src={this.props.customer.image}/>
<img style={styles.logo} className="img-responsive" src={this.props.customer.logo}/>
<h3 style={{color: '#F05A28', margin: 0,}}>{this.props.customer.name}</h3>
<h4 style={{fontWeight: 200, margin: 0,}}>{this.props.customer.title}</h4>
<p style={{fontSize: 16}}>{this.props.customer.description}</p>
</div>
<button onClick={()=>this.props.toggle()}>Click</button>
</div>
}
I'm able to get carousel to work, but it's static. Ideally, I want the customers to slide left/right depending on if it's going to the next or previous customer.
My attempted solution was to try to send new props into the current customer when the next button is pressed, but the current customer never receives those new props because it's not even rendered due to the conditional.
I think the main problem is that only one customer is rendering at a time due to the condition within the map, and that customer does not get the index of the next customer.
Can someone guide me in the right direction?
I know there's React Slick Carousel but I wasn't able to get it to work, so I wanted to try my hand at doing it myself.