I have a list of React Components that are inside a horizontal scroll menu. The components are draggable, and I want them to be able to be dragged and dropped outside the scroll menu and into other another component. IS that possible with a scroll menu. Are there other options I have to display draggable components horizontally that can be dragged and dropped anywhere on the screen?
<ScrollMenu>
{items.map((x) => (
<div>
{x}
</div>
))}
</ScrollMenu>
This is the only solution I've tried so far. Currently, the draggable component disappears when dragged outside of the view
Related
I'm using the Navbar component from react-bootstrap as documented here:
https://react-bootstrap.github.io/components/navbar/
When the nav bar is viewed on a smaller screen a hamburger icon is displayed.
How can I change the icon when the menu is clicked and the menu is expanded?
i have used the following tag to set the page to horizontal view thisworks well in dektop and laptop screens.
<HorizontalScroll>...</HorizontalScroll>
this tag allows the components to scroll in the x-axis only.
In mobile view the components should be moving in the y-axis. i.e, the contents should only move up and down in the devices with max-width of 570px. Is there any way that the up-down scroll can be applied ??
The code.
App.js
import HorizontalScroll from 'react-scroll-horizontal';
<HorizontalScroll>
<LandingPage />
<PDP />
<Onboarding />
<Execution1 />
</HorizontalScroll>
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'm doing a webpage and I have a parallax component in the middle of it, when I'm scrolling from top to bottom of the page, and parallax comes in view, the scroll doesn't trigger on it, only when I stop the mouse for a moment inside the parallax element the browser triggers scroll to that element.
I saw this question on stackoverflow, but the response didn't work for me. This is what I've tried:
Created a handleScroll function
const handleScroll = () => {
ref.current.container.current.click();
};
Set a ref to Parallax wrapper
<Parallax ref={ref} pages={4} className={styles.parallax}>
Added a onMouseOver listener to trigger the handleScroll so the element clicks it self
<Parallax
ref={ref}
pages={4}
className={styles.parallax}
onMouseOver={handleScroll}
onClick={() => console.log(`i was clicked`)}
>
This dont work, when I scroll kinda fast, the onmouseover is not recognized, there are any other ways I can trigger a click to my parallax so it get focus and browser starts scrolling on it instead of the main content scroll bar?
Inside a FlatList I have accordions (by react-native-paper). When I scroll to any position and open/close an accordion, The FlatList scrolls to the top of the screen. How should I prevent it?
in another word when an accordion gets expanded, the content size is changed. How to stay where the user was on content size changes. The current snippet does not work and the stored y position resets.
const flatListRef = React.useRef<FlatList<any>>(null);
const yOffset = React.useRef<number>(0);
<FlatList
ref={flatListRef}
data={properties}
renderItem={renderItem}
keyExtractor={(item) => `${item.id}`}
onContentSizeChange={() =>{flatListRef.current!.scrollToOffset({offset: yOffset.current, animated: false});}}
onEndReached={onEndReached}
onEndReachedThreshold={0}
scrollEventThrottle={15}
onScroll={(e) => {yOffset.current = e.nativeEvent.contentOffset.y;}}
ListFooterComponent={<ActivityIndicator animating={loading} size="small" />}
/>
for instance, (inside onContentSizeChange conosle.log(yOffset.current)) if I scroll to yOffset 850 and exapnd the accordion there, in console I see two logs, 850, then 126 (which 126 returns to the top) which indicates, onScroll was called and yOffset changed.
Not sure about your question here, but if you don't want to scroll to top on accordion expansion, just remove onContentSizeChange and onScroll prop.
Also, if you want that on accordion press that should come on top of the screen just wrap the Accordion in a View and get the expanded height/xy coordinates of the View using the onLayout prop and then you can use the Flatlist's scrollToOffset() to scroll to that particular Accordion