I'm looking to build a UI with stackable cards, something like:
Where there are a dynamic number of cards being the currently active card, and as the top card goes away, cards below is displayed. Very similar to Tinder's swipe-able experience.
I need to build this UI Component in my React web-app (not native). I found this library which looks very popular:
https://github.com/oliviertassinari/react-swipeable-views
However this library does not appear to support stacking view, and showing all the views at an offset as seen below.
Does anyone know if it is possible to accomplish what I'm looking for with react-swipeable-views or if there is a better library out there to accomplish UIC as seen in the image?
You could use the react-spring library to achieve this. Here is an example of that behavior implemented.
I hope it helps you!
Related
I know this is a bit of a stretch, but I have been building this small React application that includes creating, editing and deleting these draggable cards. I now want to make some type of a system where I can create a list that holds those cards, so that I could possibly track their completeness that way. The issue is - I experimented with some placeholders, but the problem is I have not too much knowledge on how to approach this problem. Any advice (using React JS) would be greatly appreciated!
My repository: https://github.com/SortedIvan/DigitBiscuit
I tried creating the list functionality, but unfortunately I can't get it to work at all. I am not asking for a full on solution, but maybe advice on how to somehow target this problem! :)
I am building a single page e-commerce app. The products page is based on cards in a responsive grid. I want to make a card to expand onClick to fullscreen with something like spring or ease animation to see full product page.
The problem is the card is tied to the grid and is not always in center. And everything I tried to do with css animations looked awful from animations perspective and felt like a bicycle from code perspective.
I just wanted to ask, what in short is the best way to achieve this, what path should I choose? And is it really possible with grid I have now, or I should try something different? I thought of using Framer Motion as an animation library.
Here you can see something similar to what I want to achieve: https://youtu.be/XyBbFMhMtik?t=10
And here is simplified codesandbox of what I have now: https://codesandbox.io/s/dank-water-o2lpp
I'm working on with a working model like this:
So here, the left side is a simple list which containse list items.
1. This is not droppable, draggable only
2. After drag, this list remains same all the time.
On the right side, the dragged item will be dropped here.
Once the user dragged an item from left side, the other side/ right side should indicate a placeholders to user where they can drop.
All the dropped items on the right side can be swappable within right side.
Right side area should contain like bootstrap row, column functionality.
I have to achieve something similar to this https://react-email-editor-demo.netlify.com/
Already, I gone through fre react plugins like react dnd and react -beautiful-dnd. I don't get an idea like whether above points are achievable by using these two plugins.
After searched many things,In react-beautiful-dnd, we can't add custom placeholders.
Any help on this, would be grateful.
Here I created for you a small example that tries to replicate the drag in a placeholder behavior from the link you shared above.
Keep in mind that you have total freedom to create how many droppable targets as you want and make them accept different types of items, based on what you specify in accept array of useDrop hook.
I hope it helps.
React DND is the most popular library. However, it is not impossible to implement your own. Please, have a look on this answer.
I'm not sure about the placeholder suggestion bit but Dragula JS is a quite easy library to use for drag and drop features. You can check it on github and see the demos there too.
https://github.com/bevacqua/dragula
Demo page - https://bevacqua.github.io/dragula
Hope this helps.
I am not asking direct code.Just want to know different approaches.
I am new to react native. I am trying to create a button which I can slide/swipe and it will trigger screen change.(navigation)
<ScrollView> can be used to swipe between different pages, see this for more detail.
For navigation in general, I think a better option would be to use the react-navigation library as it offers a wide array of options, which can be nested together to achieve a better effect for the end-user. See this link for the same.
Use case:
A web page where the user is presented with several cards containing text. The user can classify the cards by dragging them to one of four containers. The cards should then snap into place, and the container should display a counter with the number of cards it contains.
The app is based on Rails, but this obviuosly needs to be done in JavaScript. The content of the cards is read and written to the server through a JSON API.
I know basic JS, CSS and HTML 5, but I hope someone can point me in the right direction when it comes to implementing this. For instance:
Should I use HTML 5 canvas?
Is there a JS library that will make the implementation easier?
If you can use make it without canvas, by using simple jQuery code.
Take a look at jQuery UI (https://jqueryui.com), especially at Draggable and Droppable.