swipeable navigation
Whats the best approach to make link area swipeable left and right?
Ive failed to find ready to use component that allows to do that.
Ive tried to use React Touch SyntheticEvent and transform translateX to navigation bar, but failed with calculations. So question is what are the ways to achieve that and is there any react components that can help me to make this work?
Maybe you need to have a look at there.
Although it only supports element swipeable up and down, you can refer to the code of how the author implements element swipeable with translate3d.
The main idea of swiper is to calculate the position of the element, and when to start translation. You can record scrollHeight/scrollWidth and offsetHeight/offsetWidth when you start move event, and compare the value of them when the event is end. Then you know where is the element, and you can control the transform of the element as you want.
So far as I know, maybe Iscroll is a good solution for you.
Related
I try to recreate this effect with curtains-react but I can not find a shader that corresponds, and at the same time make the uniforms work ... If someone can give a lead, an article or an example with curtains-react, it would be of great help to me!
https://www.haritos.co/
It's a infinity draggable slider and when you click on a image, you access to the project, is the raison why I use curtains-react.
I also wanted to use curtains-js in my project. While browsing I found this codepen which is kind of what you need although the click-through is not implemented.
https://codepen.io/AlainBarrios/pen/bXdzmR
It uses curtains-js instead of curtains-react but I think it should be easly convertable. Put the onRender function in the useCurtainsEvent and add event listeners for the draggable events.
useCurtainsEvent("onRender", (curtains) => {})
I would first make a draggable list in react and then add each event of the example one by one. Just remember that animations like these take a lof of time and will to get right :)
In React Native, I would like to achieve the following outcome (example):
example1 example2
On Long Press of the image (or touchableOpacity), I hope to display an overlay view of some extra information (could be images or text). The information disappears when the finger leaves the screen. I was thinking if it is something related to overlay view and setState, but I could not find the function where the view only appears during long presses. Is there a way to achieve this? Or is there a module that could provide a solution?
Any help would be appreciated!
If you are using the latest react native version you can use the onPressOut functionality of a pressable component: https://reactnative.dev/docs/pressable.
Trigger the show overlay with the onLongPress (or onPressIn but it's not a good UX) function and then trigger the hide overlay with onPressOut function.
For the overlay I suggest you a cool library like:
https://reactnativeelements.com/docs/tooltip/
I'm about to try to create a walkthrough for a web app created using React. I'm trying to think of the best way to do it, and have been thinking of using things like Material UI's modal component. I'm thinking I should also include some kind of arrow component that points the user to whichever element (button, link, etc) on my page I want them to click next. Also I will want to create a backdrop to fade the screen except for whichever element I want the users attention to be drawn to.
I feel like this must have been done many times before, but I can't find anything from searching. Obviously whenever I Google "react walkthrough/guide/intro" I just get suggestions for teaching basic React.
(NB: I'm not looking to do one of those intro sliders, as I want to provide a more detailed step-by-step)
The keyword your need to search for is 'tour'. Searching on google for 'react tour', I found 2 libraries for you:
React Joyride: https://github.com/gilbarbara/react-joyride | Live Demo
reactour: https://github.com/elrumordelaluz/reactour | Live Demo
Both seem to have similar features:
Instruction modal that explains about an element on the page.
The modal is positioned next to the highlighted element.
The window will scroll down to the highlighted element if it's outside of the viewport.
The element is highlighted to bring more attention while the rest of the page is in the backdrop.
There are steppers on the modal to indicate which step you're on.
I'm building a React Native app which has a screen containing a list of several items the user can see. I wrapped up the elements by using a ScrollView component and it works fine as shown below:
However, I'd like to have the vertical scrollbar always visible just to let the user know he can see more items than the ones shown in the first place. I've read the ScrollView documentation but it seems that there is not an option to make it happen.
Does anyone know if there is a way to achieve that or perhaps a workaround to make it intuitive to the user that there is a scroll on the list?
Try this ,Its working for me
persistentScrollbar={true}
https://facebook.github.io/react-native/docs/scrollview#flashscrollindicators
The closest thing to showing the scroll indicator constantly that is available in React Native is flashing the indicator. You can obtain a reference to the scrollview and call the flashScrollIndicators() method. There is no known way to disable hiding the indicator without writing native code. If you want to go down that path, you could try something like this for iOS.
I am pretty new to React.js, what I want to implement is a drag drop component (let us call it DDCom):
DDCom can drag (but not move the original one, more like a clone and that clone move with mouse), and that clone can only drop to other DDCom area (when drag start, each DDCom will show a highlight background area to indicate the drop area)
I really have no idea how to implement this in React.js, could anyone give any code example for this ( or some explanation about how to structure this with FLUX pattern)? Most posts point to React DnD, but it seems so big and hard to understand, what I want is a simple clear work flow of implementation.
You might find https://github.com/Khan/react-components/tree/master/examples useful, within the react components / examples there is a drag drop example.
or http://react.rocks/tag/Drag_Drop
Also looked at React DnD but I agree its hard to wrap your head around it.
Use Dargula.
Its simple and clear and has a react wrapper, react-dragula
This is pretty easy I think with https://github.com/peterh32/react-drag-drop-container
<DragDropContainer targetKey="DDCom" >
<div>Drag Me!</div>
</DragDropContainer>
<DropTarget targetKey="DDCom" >
<p>I'm a valid drop target for the object above since we both have the same targetKey!</p>
</DropTarget>
If you put dragClone={true} in the DragDropContainer, it will drag a copy as you describe.
Then add an onHit event handler in DropTarget to do what you want when the item is dropped on it.
Works on mouse and touchscreens too.
I used the react dropzone package - https://github.com/react-dropzone/react-dropzone. There is even support for material ui.