How to make an endless table scroll in React so that a maximum of 25 elements can be seen - but it scrolls not only when the mouse is inside the table, but also when the mouse is outside the table + you need to take into account that the table will not be the first element on the site and I think you can make the function dynamic tables so that the table would not be created by an extra screen position, for example, +2 elements after the bottom of the screen. I would be very grateful if something comes of this my idea
Related
I have column #1 thats on the left side of the page that is housing my Names and i have a second column that is housing all of its descriptions under that name. The left column is not scrollable, but as you scroll down the middle column, i want the Name on the left side of the column to be highlighted once the majority of the descriptions of that particular name are visible in the second column.
I tried to use react-use-scrollspy but the problem im seeing is that the Name only changes in its highlighting once i scroll OUTSIDE of the middle column, and does not update the highlighting as i scroll WITHIN the second column. I feel like I am missing something regarding how React rerenders the page to see where the reference window location is
I have an editor that is supposed to have entities with the props name, color, start, end. In the editor the text in positions denoted by start and end will be subsistuted by name, and it will be rendered by a custom component with contentEditable=false.
This works great with draftjs in general but there are a couple of issues:
When moving the cursor with the keyboard arrows, the entities are skipped over, which is good. But when an entity is at the very end of the input and I try to move rightwards past it (either just with right arrow or with option or cmd + right) the cursor disappears and doesn't come back when I move left again.
If I go right to the left of an entity and push shift + option + right arrow, the entity is selected as expected. But if I then press left arrow the cursor is also lost.
I could fix this by making sure there is always a whitespace after such a last entity, but that seems hacky and probably has edge cases.
Another option is to not use contentEditable=false, but that creates other issues with my actual app, which has a more complicated entity component including a dropdown, and I will have to manually make sure the user can't change text inside the entities etc.
Here is a reproduction of the issue: https://codesandbox.io/s/competent-surf-st77i
Any ideas?
I'm trying to do something like below:
Scenario 1: User will drag and drop List 1 from left side to right side.
Scenario 2: Again, User will drag list 2 to right side, when that dragging item hover on list 1, have to show drop zones to drop that list 2 item here.
Finally, List 1 and List 2 both will be placed like left and right side.
With React Dnd, Is this achievable? and I tried this it works only while dragging. https://stackblitz.com/edit/react-pctpdh
I'm able to show a drop area while dragging, it shows every time, but I need to show that drop area only hover on some item.
Below is the sample work, I have to achieve:
Need to show placeholder to drop an item while hover other items to drop. (Need to Create dynamic drop targets while mouse hover some item)
I need a help on this to achieve this feature.Any idea on this really commendable.
I saw the code snippet and i added some new code that replicates your desired behavior.
The idea is to create a separate component to handle drop actions, that can be reused when is needed. In this particular case, I choose to use the component inside your ListItem component to create two drop zones on both sides.
Here is the updated code: https://stackblitz.com/edit/react-pctpdh
I'll first describe the problem I want to solve, and then my naive solution.
Problem: I want to have some grid of squares with a fixed size. When the user hovers over a cell, it should highlight the surrounding cells.
My solution: Use an HTML table, with tds representing cells. The table passes in a hover listener to every cell (e.g. () => cellEnter(5, 7) for cell at (5, 7)). The cell then calls this handler when it's hovered over, which goes to the table component which calculates which cells should be highlighted, and then updates its state to reflect which children are highlighted.
Issue: The performance on my device deteriorates once the table dimensions reach 100. I added a shouldComponentUpdate to the cells to only update when their highlighted state changes. Using the React chrome tool, I can see that only the relevant cells are being updated, but the table itself is also updating. The RAM and CPU usage blows up really fast.
Am I right in assuming there is no avoiding this, since the children can't re-render without the parent re-rendering. My original pure JS solution worked in O(1) since it just updated the cells directly. Is there a way to represent this relationship in React while keeping O(1) performance? Maybe the issue lies elsewhere, so I whipped up a fragment of my app (forgive the rushed code).
Codepen here
I'm very new to React, I appreciate any help.
I am toying with an idea of rewriting our current Backbone-based app in React. One piece of functionality that is giving me headache is keyboard navigation. The app must be navigable using keyboard. Here is roughly what this looks like:
There is a header element with several buttons. There is also a main area with navigable elements that is built dynamically, from the results of a network request. The elements in the main area are arranged on the screen in a sort of grid (usually, 2 rows of 3 elements each, though on the mockup I showed rows of 2 elements).
The focus is initially on Element 1 (though if no elements have been fetched, then I guess a header button should be focused). Using arrow keys, one should be able to navigate within a component (from Element 1 to Element 2 with the right arrow key; from Element 2 to Element 1 with the left arrow key; from Element 1 to Element 3 with the down arrow key, and so on), and between components (from Element 1 to the header’s Button 1 with the up arrow ket; from header’s Button 1 to Element 1 with the down key, etc.). The elements that don't fit on the screen should be brought in view with the press of an arrow button when focused on an appropriate element (e.g., pressing right arrow when focused on Element 2 should "scroll" the main area to the right and bring Element 5 into the viewport).
Currently, in the original Backbone-based app, this functionality is achieved by adding a custom attribute to all navigable elements and then using a third-party jQuery-based library that calculates the absolute positions of the elements on the screen and moves the focus from one element to the next depending on how they are positioned relative to each other. What would be an idiomatic React (+ Redux, if possible) way to reproduce this behavior?
My recommendation:
Add and event listener to the container component for the elements. Set up an event listener in componentDidMount with a callback that somehow calculates what the next element is based on what button it was (hard for me to advise on this--if you are strict about only having 4 per page with max 2 rows, then you can do something like (left) => current - 1, right (right) => current + 1, (down) => current + (count / 2), etc). That will fire an action like
{ type: ELEMENT_SELECTED, payload: { selectedElID } }
or if you're just keeping it in local state, this.setState({ selectedEl })
Then in your render function, always make sure that its rendering with the selected element in view.
Does that make sense?
I've come across with this old post today, but maybe a good solution for this kind of problem could be React-Navetree lib. It calculates distances between node to resolve who is the next/previous node, but it doesn't keep an active one.