I am using React-swipe for a project. I follow the main example.
<div>
<ReactSwipe
className="carousel"
swipeOptions={{ continuous: false }}
ref={el => (reactSwipeEl = el)}
>
<div>PANE 1</div>
<div>PANE 2</div>
<div>PANE 3</div>
</ReactSwipe>
<button onClick={() => reactSwipeEl.next()}>Next</button>
<button onClick={() => reactSwipeEl.prev()}>Previous</button>
</div>
But the result is that PANE1, PANE2, PANE3 all takes up the whole screen width. I want all PANE1, PANE2 and PANE3 have 60vw so that you see PANE1 and part of PANE2. What I want is Facebook like mobile carousel which is somehow like the following:
https://codesandbox.io/s/lrk6955l79?module=%2Fsrc%2FCarousel.js
Thank you.
In src/components, change flex-basis property of CarouselSlot from 80% to something like 50%. And if you want to change the starting point of the visible slides, you can play with transform property of CarouselContainer.
Related
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.
Right now my li tag has a mouseenter and mouseleave effect, but when I shrink my site down to mobile view, I want it to change to onClick instead.
So the code below shows my menu with the dropdown. Whenever I click on the hamburger menu in mobile view, it will trigger the active class on the <ul> and open up the mobile view. Then when I hover over the li tag it will display the dropdown menu.
Instead of it displaying when I hover, I need it to display when I click the ul tag only at the breakpoint of 960px.
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li
className='nav-item'
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<Link to='/' className='nav-links' onClick={() => setClick(false)}>
Home <i class='fas fa-caret-down' />
</Link>
{dropdown && <Dropdown />}
</li>
<li className='nav-item'>
<Link
to='/services'
className='nav-links'
onClick={() => setClick(false)}
>
Services
</Link>
</li>
</ul>
Is that something that is posssible to do? Or would I have to completely redo my code?
It most definitely is. And there are many options of how you could do it, these are some that come to my mind at first:
Option #1:
You could render 2 completely different things based on media query, something like this:
<div className="hidden-xs">
<ol onClick={() => {}}></ol>
</div>
<div className="hidden-lg">
<ol onMouseLeave={() => {}} onMouseEnter={() => {}}></ol>
</div>
Option #2:
You could disable certain functions based on current viewport
const onMouseEnter = () => {
if (window.width > something) {
return;
}
do something otherwise
}
const onClick = () => {
if (window.width < something) {
return;
}
do something otherwise
}
I would recommend taking a look at some of these articles & modules:
Medium post about media queries in React
react-media
react-responsive
So far the map is working perfectly except for one problem, every time I click the button to post a comment a whole new post populates the UI. What I want is to only render a comment not a whole post every time I click the post comment button. What I tried to do is do map within a map, as you can see below. However its still rendering the a whole post. How do I map for a certain item, I think that will help. What should I do?
const { TextArea } = Input;
const PostOnWall = (props) => (
<div>
{props.postInfo.map( (item) => (
<div>
<div className="PostOnWall">
<div className="topbar">
<img src = {profile} className="image"/>
<div className="name">Brad Pitt</div>
<div>{item.time}</div>
</div>
<div className="text">{item.post}</div>
<img src={item.uploadedImage} />
</div>
<div className="engagementBar">
<div><FontAwesomeIcon icon={fathumbsup} size="2x"/> Like</div>
<div><FontAwesomeIcon icon={facomment} size="2x"/> Comment</div>
<div><FontAwesomeIcon icon={fasharesquare} size="2x"/> Share</div>
</div>
<div className="postCommentBox">
<img src = {profile} className="image"/>
<TextArea type = "text" placeholder="Write a comment" autoSize id="comment" onChange={props.onChange}/>
<div>
<button onClick={props.onClick}></button>
</div>
</div>
{item.comment.map( (items) => (
<div>
<div> {items} </div>
</div>
))
}
</div>
))
}
</div>
)
I think with current structure it's not really possible to re-render only comments. In order to make that possible you might need to move comments to a separate component.
Another important thing I spot you don't use key while rendering lists, so it decreases performance quite a lot as React will need to re-render the whole list on each render. You can read about it here: https://reactjs.org/docs/lists-and-keys.html
I am using Fullpage React. I want to click on a sidebar of circle images with numbers corresponding to the section I want to go to. How do I activate the onclick? I have data anchors on the sections (ie section1, section2, etc) and on the images I have data menu anchors (ie, section1, section2, etc). I am doing all this in a class in my App.js. I can't seem to figure out how to use an onclick to tie the image being clicked to take it to that section with Fullpage. I am able to scroll up and down to each section which is working fine. I want to give the user the option to scroll and/or click to each section.
I used refs first and then added Fullpage for the scroll to section effect. But my onclick with the refs stopped working. How can I get the onclick to each section working and keep the scroll effect to each section too?
<img className='circle-1' src='assets/images/circle1.png' onClick={() => this.clickToSection(this.section1ref.current)} data-menuanchor='section1'/>
<img className='circle-2' src='assets/images/circle1.png' onClick={() => this.clickToSection(this.section2ref.current)} data-menuanchor='section2'/>
<img className='circle-3' src='assets/images/circle2.png' onClick={() => this.clickToSection(this.section3ref.current)} data-menuanchor='section3'/>
<div className='section' ref={this.section1ref} data-anchor='section1'>
SECTION 1
</div>
<div className='section' ref={this.section2ref} data-anchor='section2'>
SECTION 2
</div>
<div className='section' ref={this.section3ref} data-anchor='section3'>
SECTION 3 />
</div>
You can take a look at the example in the official documentation for react-fullpage.
Basically:
<button onClick={() => fullpageApi.moveSectionDown()}>
Click me to move down
</button>
You can see it in action here:
https://codesandbox.io/s/m34yq5q0qx
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.