Develop Reference

Animating react list dragging items

The snippet below contains an array of 10 items. I'm able to drag and drop the list items and even able to achieve some basic animations when grabbing the list item:
const App = () => {
const [myArray, setMyArray] = React.useState([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
const [draggedIndex, setDraggedIndex] = React.useState(-1);
const onDragStart = (e, index) => {
setDraggedIndex(index);
const emptyDiv = document.createElement('div');
emptyDiv.style.width = '0px';
emptyDiv.style.height = '0px';
e.dataTransfer.setDragImage(emptyDiv, 0, 0);
e.currentTarget.className = 'draggable';
};
const onMouseDown = (e) => {
e.currentTarget.className = 'draggable';
};
const onMouseUp = (e) => {
e.currentTarget.className = 'listItem';
};
const onDragOver = (e, index) => {
e.preventDefault();
if (draggedIndex === -1 || draggedIndex === index) {
return;
}
let items = myArray.filter((item, i) => i !== draggedIndex);
items.splice(index, 0, myArray[draggedIndex]);
setMyArray(items);
setDraggedIndex(index);
};
const onDragEnd = (e) => {
setDraggedIndex(-1);
e.target.className = 'listItem';
};
return (
<div className="App">
{myArray.map((x, i) => (
<div
className="listItem"
draggable
key={x}
onDragStart={(e) => onDragStart(e, i)}
onDragOver={(e) => onDragOver(e, i)}
onDragEnd={onDragEnd}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
>
<h3>hello - {x}</h3>
</div>
))}
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
.App {
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
}
.listItem {
border: 2px solid black;
margin: 5px;
width: 400px;
cursor: grab;
transform: scale(100%);
transition: transform 0.3s ease-in-out;
}
.draggable {
border: 2px solid green;
margin: 5px;
width: 400px;
cursor: grab;
transform: scale(108%);
transition: transform 0.3s ease-in-out;
}
.listItem:-moz-drag-over {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Can I get help with CSS animations to make the list item movements smoother during dragging so it looks less choppy? The goal is to achieve the following effect - when I drag an item it would smoothly reposition itself up/down, and the item that is being dragged over would smoothly move in the opposite direction.
EDIT 1:
Please check the code snippet, run it, and try to drag the list items to understand my requirements.
Basically, what I want is to animate the transition of the dragged item depending on which direction (up or down) the item is being dragged. In theory, while dragging an item up, it could apply a class something like .dragged-up and that class would have animation/transition that would create an illusion that that item moving from the lower to the higher position.
The same principle could be applied to the items above and below the item being dragged. For example, If the item that is being dragged over moves from the top to the bottom, a different class could be applied, something like .listItem-down, and that class could contain an opposite animation. Also, I suspect it would need to have a lower z-index so it would appear below the dragged item.
Not sure if it's the most efficient approach and if it's possible to do it that way at all. So far, while trying to implement something like this, I've been getting issues of items overlapping and as a result, the event function was being executed on the wrong div, causing some undesired effects.
Some help and a working snippet would be much appreciated!

This answer is inspired by this solution, and attempts to make a greatly simplified port of its main ideas to functional React components that works for the draggable elements in the use case.
In the posted example, order of items in the array is updated on every event of dragging over. To create a transition when the reorder happens, the difference before and after the change for each item can be detected, and used as the starting and ending points for the animation.
The following approach assigns a keyed ref for each item to keep track of the updates, and check for the changes in their rendered position with getBoundingClientRect in a useLayoutEffect, so that further actions can be taken before the browser repaints the screen.
In order to calculate the differences, the position of items in the last render prevPos is stored separately as another ref, so that it persists between renders. In this simplified example, only top position is checked and calculated for a difference, to create an offset for translateY to happen.
Then to arrange for the transition, requestAnimationFrame is called two times, with the first frame rendering the items in the offset positions (starting point, with offset in translateY), and the second their in new natural positions (ending point, with 0 in translateY).
While at this point useLayoutEffect already handle the animations as expected, the fact that onDragOver triggers and updates the state very often could easily cause errors in the motion display.
I tried to implement some basic debouncing for the update of the state array and introduced another useEffect to handle the debounced update, but it seems that the effects might be still occasionally unstable.
While lots of improvements could still be done, here is the experimental example:
const App = () => {
const [myArray, setMyArray] = React.useState([
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
]);
const [draggedKey, setDraggedKey] = React.useState(null);
const [pendingNewKey, setPendingNewKey] = React.useState(null);
const elRef = React.useRef({});
const keyInAnimation = React.useRef(null);
const prevPos = React.useRef({});
// 👇 Attempt to debounce update of array
React.useEffect(() => {
if (
pendingNewKey === null ||
draggedKey === null ||
draggedKey === pendingNewKey ||
keyInAnimation.current === draggedKey
)
return;
const updateArray = () => {
setMyArray((prev) => {
const prevIndex = prev.findIndex((x) => x === draggedKey);
const newIndex = prev.findIndex((x) => x === pendingNewKey);
const newArray = [...prev];
newArray[prevIndex] = pendingNewKey;
newArray[newIndex] = draggedKey;
return newArray;
});
};
const debouncedUpdate = setTimeout(updateArray, 100);
return () => clearTimeout(debouncedUpdate);
}, [pendingNewKey, draggedKey]);
React.useLayoutEffect(() => {
Object.entries(elRef.current).forEach(([key, el]) => {
if (!el) return;
// 👇 Get difference in position to calculate an offset for transition
const { top } = el.getBoundingClientRect();
if (!prevPos.current[key] && prevPos.current[key] !== 0)
prevPos.current[key] = top;
const diffTop = Math.floor(prevPos.current[key] - top);
if (diffTop === 0 || Math.abs(diffTop) < 30) return;
prevPos.current[key] = top;
el.style.transform = `translateY(${diffTop}px)`;
el.style.transition = 'scale 0.3s ease-in-out, transform 0s';
// 👇 First frame renders offset positions, second the transition ends
requestAnimationFrame(() => {
requestAnimationFrame(() => {
if (!el) return;
el.style.transform = `translateY(0px)`;
el.style.transition =
'scale 0.3s ease-in-out, transform 100ms ease-out';
});
});
});
}, [myArray.toString()]);
const onDragStart = (e, key) => {
keyInAnimation.current = key;
setDraggedKey(key);
const emptyDiv = document.createElement('div');
emptyDiv.style.width = '0px';
emptyDiv.style.height = '0px';
e.dataTransfer.setDragImage(emptyDiv, 0, 0);
e.currentTarget.className = 'draggable';
};
const onMouseDown = (e) => {
e.currentTarget.className = 'draggable';
};
const onMouseUp = (e) => {
e.currentTarget.className = 'listItem';
};
const onDragOver = (e, key) => {
e.preventDefault();
if (draggedKey === null) return;
if (draggedKey === key) {
keyInAnimation.current = key;
setPendingNewKey(null);
return;
}
if (keyInAnimation.current === key) {
return;
}
keyInAnimation.current = key;
setPendingNewKey(key);
// 👇 Attempt to reduce motion error but could be unnecessary
Object.values(elRef.current).forEach((el) => {
if (!el) return;
el.style.transform = `translateY(0px)`;
el.style.transition = 'scale 0.3s ease-in-out, transform 0s';
});
};
const onDragEnd = (e) => {
setDraggedKey(null);
setPendingNewKey(null);
keyInAnimation.current = null;
e.target.className = 'listItem';
};
return (
<div className="App">
{myArray.map((x) => (
<div
className="listItem"
draggable
key={x}
onDragStart={(e) => onDragStart(e, x)}
onDragOver={(e) => onDragOver(e, x)}
onDragEnd={onDragEnd}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
ref={(el) => (elRef.current[x] = el)}
>
<h3>hello - {x}</h3>
</div>
))}
</div>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
.App {
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
isolation: isolate;
gap: 15px;
}
.listItem {
border: 2px solid black;
margin: 5px;
width: 400px;
cursor: grab;
z-index: 1;
transition: scale 0.3s ease-in-out;
background-color: white;
}
.draggable {
border: 2px solid hotpink;
margin: 5px;
width: 400px;
cursor: grab;
scale: 108%;
z-index: 10;
transition: scale 0.3s ease-in-out;
background-color: white;
}
.listItem:-moz-drag-over {
cursor: pointer;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

Rendering an array in React

I'm trying to render my arr in my render function.The code doesn't give any error.Here I'm trying to calculate the fibonacci series and display it on the screen.The problem with the code is when I enter a certain number in the text field it doesn't print the series on the screen but when I clear the text field without refreshing it prints the correct series on the screen.I can't understand where this error comes from.
import React, { useState } from 'react';
import { Button, TextField } from '#material-ui/core';
import './App.css';
function App() {
const [limit, setLimit] = useState(1);
const [arr, setArr] = useState([]);
function handleGenerateFibonacci(event) {
for (const n of generator(limit)) {
arr.push(n)
setArr(arr)
}
event.preventDefault();
}
function* generator(limit) {
var i = 0;
var a = 0;
var b = 1;
yield a;
yield b;
for (i = 1; i <= limit - 1; i++) {
var fibNumber = a + b
yield fibNumber
a = b
b = fibNumber
}
}
return (
<div className="App">
<form >
<h1>Generating the Fibonacci Series</h1>
<h2>Enter the range</h2>
<TextField onChange={e => setLimit(e.target.value)}></TextField>
<br />
<Button onClick={handleGenerateFibonacci} type="submit" style={{
height: 40,
width: 160,
borderRadius: 10,
backgroundColor: "Blue",
marginLeft: 50,
marginRight: 50,
marginTop: 20,
fontSize: 16,
color: "white"
}} >Calculate</Button>
<br />
<h2>Result:</h2>
<div >
<p>Fibonacci Series : {"[ " + arr + " ]"}</p>
</div>
</form>
</div>
);
}
export default App;

Because when you click button your code doesn't change value itself, just content of value
function handleGenerateFibonacci(event) {
for (const n of generator(limit)) {
arr.push(n)
setArr(arr)
}
event.preventDefault();
}
...so system doesn't really know that your array has been changed, so better write it this way
function handleGenerateFibonacci(event) {
for (const n of generator(limit)) {
arr.push(n)
}
setArr([...arr])
event.preventDefault();
}
PS when you clean the text field, limit property of state is correctly changing, so system refresh the components

Try this approach,
function handleGenerateFibonacci(event) {
for (const n of generator(limit)) {
setArr((a) => [...a, n]);
}
event.preventDefault();
}
working demo - https://codesandbox.io/s/festive-mayer-xu91t?file=/src/App.js:270-423

How can I prevent elements breaking to a new line because of margin?

I am trying to line all the elements in a single line. I wanted to make this dynamic so the width that I used is with percentage. What happens is that some of the elements are breaking to a new line. I understand that this is happening because of the margin and that the width does not include the margin in it's calculation. What can I do?
Here is my code:
import React, { useState, useEffect } from 'react';
const randomIntFromInterval = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
}
const Dummy2 = () => {
const [arr, setArr] = useState([]);
const [length, setLength] = useState(10);
useEffect(() => {
generateArray();
}, [length]);
const generateArray = () => {
const temp = [];
for(let i = 0; i < length; i++) {
temp.push(randomIntFromInterval(7, 107));
}
setArr(temp);
}
const handleLength = (e) => {
setLength(e.target.value);
}
const maxVal = Math.max(...arr);
return (
<div>
<div className="array-container" style={{height: '50%'}}>
{arr.map((value, idx) => (
<div className="array-element"
key={idx}
style={{height: `${(value * 100 / maxVal).toFixed()}%`,
width: `${100 / length}%`,
margin: '0 1px',
display: 'inline-block',
backgroundColor: 'black'}}
></div>))
}
</div>
<div>
<button onClick={() => generateArray()}>New array</button>
</div>
<div className="slider-container">
1
<input type="range"
min="1"
max="100"
onChange={(e) => handleLength(e)}
className="slider"
id="myRange"
/>
100
</div>
{length}
</div>
);
}
export default Dummy2;

Have you tried using calc() CSS function for calculating width? It allows to combine px and percentage, so you can subtract your margin from the element's width.

How to create timer in React-hooks

How i can create animated timer using React-hooks
Here is complete code what i had tried
Basically i was trying Displays the progress of time remaining as an animated ring.
But somehow i am getting failed in it
I just followed this blog for creating animated timer https://css-tricks.com/how-to-create-an-animated-countdown-timer-with-html-css-and-javascript/
function setRemainingPathColor(timeLeft) {
const { alert, warning, info } = COLOR_CODES;
console.log(dataFromDiv);
if (timeLeft <= alert.threshold) {
dataFromDiv.current
.querySelectorAll("base-timer-path-remaining")
.classList.remove(warning.color);
dataFromDiv.current
.querySelectorAll("base-timer-path-remaining")
.classList.add(alert.color);
} else if (timeLeft <= warning.threshold) {
dataFromDiv.current
.querySelectorAll("base-timer-path-remaining")
.classList.remove(info.color);
dataFromDiv.current
.querySelectorAll("base-timer-path-remaining")
.classList.add(warning.color);
}
}
React.useEffect(() => {
let timer;
let timePassed = 0;
let timeLeft;
timer = counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
timePassed = timePassed += 1;
timeLeft = counter - timePassed;
setRemainingPathColor(timeLeft);
return () => {
if (timer) {
clearTimeout(timer);
}
};
}, [counter]);

The error you were getting is because dataFromDiv.current.querySelectorAll(...) was always returning undefined because dataFromDiv.current was a reference to div#base-timer-path-remaining which is the element you wanted to modify. So, your code would work fine by just removing .querySelectorAll(...).
However, there are some better ways to structure your code:
Instead of doing direct dom manipulations, it's easier in this case to just figure out which color you want using useMemo to set up derived data based on the counter value.
You can also use an interval instead of a timer as it's easier to work with and a little bit cleaner. This also uses the updater function form of setCounter so that the effect doesn't need to have counter in the dependencies.
I also added a reset button to my example below so you don't have to re-run it every time.
const pathColor = React.useMemo(() => {
const { alert, warning, info } = COLOR_CODES;
if (counter <= alert.threshold) {
return alert.color;
} else if (counter <= warning.threshold) {
return warning.color;
} else {
return info.color;
}
}, [counter]);
React.useEffect(() => {
const timerId = setInterval(() => {
setCounter(counter => {
if (counter <= 0) {
clearInterval(timerId);
return counter;
}
return counter - 1;
});
}, 1000);
return () => {
clearInterval(timerId);
};
}, [timerReset]); // this timerReset is to make sure that the interval starts off again whenever the reset button is pressed.
This line is simply a way to force a re-render. The reducer function x=>x+1 increments the timerReset value whenever dispatch (renamed to resetTimer) is called. And then I use timerReset to force the effect to re-run in order to start the interval again (if it stopped)
const [timerReset, resetTimer] = React.useReducer(x => x + 1, 0);
const padTime = time => {
return String(time).length === 1 ? `0${time}` : `${time}`;
};
const format = time => {
const minutes = Math.floor(time / 60);
const seconds = time % 60;
return `${minutes}:${padTime(seconds)}`;
};
const WARNING_THRESHOLD = 10;
const ALERT_THRESHOLD = 5;
const COLOR_CODES = {
info: {
color: "green"
},
warning: {
color: "orange",
threshold: WARNING_THRESHOLD
},
alert: {
color: "red",
threshold: ALERT_THRESHOLD
}
};
function App() {
const [counter, setCounter] = React.useState(20);
const [timerReset, resetTimer] = React.useReducer(x => x + 1, 0);
const pathColor = React.useMemo(() => {
const { alert, warning, info } = COLOR_CODES;
if (counter <= alert.threshold) {
return alert.color;
} else if (counter <= warning.threshold) {
return warning.color;
} else {
return info.color;
}
}, [counter]);
React.useEffect(() => {
const timerId = setInterval(() => {
setCounter(counter => {
if (counter <= 0) {
clearInterval(timerId);
return counter;
}
return counter - 1;
});
}, 1000);
return () => {
clearInterval(timerId);
};
}, [timerReset]);
return (
<div className="App">
<div className="base-timer">
<svg
className="base-timer__svg"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<g className="base-timer__circle">
<circle
className="base-timer__path-elapsed"
cx="50"
cy="50"
r="45"
/>
<path
id="base-timer-path-remaining"
className={`base-timer__path-remaining ${pathColor}`}
d="
M 50, 50
m -45, 0
a 45,45 0 1,0 90,0
a 45,45 0 1,0 -90,0
"
/>
</g>
</svg>
<span id="base-timer-label" className="base-timer__label">
{format(counter)}
</span>
</div>
<button
onClick={() => {
setCounter(20);
resetTimer();
}}
>
reset timer
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
/* Sets the containers height and width */
.base-timer {
position: relative;
height: 300px;
width: 300px;
}
/* Removes SVG styling that would hide the time label */
.base-timer__circle {
fill: none;
stroke: none;
}
/* The SVG path that displays the timer's progress */
.base-timer__path-elapsed {
stroke-width: 7px;
stroke: grey;
}
.base-timer__path-remaining {
stroke-width: 7px;
stroke-linecap: round;
transform: rotate(90deg);
transform-origin: center;
transition: 1s linear all;
fill-rule: nonzero;
stroke: currentColor;
}
.base-timer__path-remaining.green {
color: rgb(65, 184, 131);
}
.base-timer__path-remaining.orange {
color: orange;
}
.base-timer__path-remaining.red {
color: red;
}
.base-timer__label {
position: absolute;
width: 300px;
height: 300px;
top: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Updating attribute value in Loop - Reactjs

I am trying to make a image slide from left to write and right to left infinitely in a loop in my react component.
I am not able to change the left property of the style attribute.
Here is the relevant piece of code
let lastRight = 0;
let multiplier = 1;
const images = [One, Two, Three, Four];
class ImageStream extends Component {
state = {
position: [0, 640, 1280, 1920]
};
changeLeft() {
if (lastRight > 2000) {
multiplier = -1;
} else if (lastRight < -600) {
multiplier = 1;
}
for (let i = 0; i < this.state.position.length; i++) {
this.state.position[i] = (this.state.position[i] + (multiplier * 1));
lastRight = this.state.position[i];
}
}
componentDidMount() {
this.intervalID = setInterval(this.changeLeft.bind(this), 200);
}
componentWillUnmount() {
// use intervalId from the state to clear the interval
clearInterval(this.intervalId);
}
renderImage(imageUrl, index) {
return (
<img
src={imageUrl}
style={{ left: this.state.position[index] }}
key={index + "_image"}
/>
);
}
render() {
return (
<div id="image-scroll" className="mt-4">
{images.map((imageUrl, index) => this.renderImage(imageUrl, index))}
</div>
);
}
}
export default ImageStream;
What I am expecting is that the left property of the style attribute of the image changes because the position arrays is changing regularly.
I am fairly new to React and would love to know if I am doing this wrong/right.
Thank you in advance for looking into it.

You were not using setState to change the state, also tweaked a few numbers and CSS to get the things running. Do check it out
let lastRight = 0;
let multiplier = 1;
const images = ["One", "Two", "Three", "Four"];
class ImageStream extends React.Component {
state = {
position: [0, 640, 1280, 1920]
};
changeLeft() {
if (lastRight > 2000) {
multiplier = -1;
} else if (lastRight < -600) {
multiplier = 1;
}
let posArr = [...this.state.position]
for (let i = 0; i < posArr.length; i++) {
let pos = posArr[i]
, newPos = pos + (multiplier * 10)
posArr[i] = newPos
this.setState({ position: posArr })
lastRight = newPos
}
}
componentDidMount() {
this.changeLeft = this.changeLeft.bind(this)
this.intervalID = setInterval(this.changeLeft, 10);
}
componentWillUnmount() {
// use intervalId from the state to clear the interval
clearInterval(this.intervalId);
}
renderImage(imageUrl, index) {
return (
<img
src={imageUrl}
style={{ left: this.state.position[index] }}
key={index + "_image"}
/>
);
}
render() {
return (
<div id="image-scroll" className="mt-4">
{images.map((imageUrl, index) => this.renderImage(imageUrl, index))}
</div>
);
}
}
// Render it
ReactDOM.render(
<ImageStream />,
document.getElementById("react")
);
img{ position: relative; width: 100px; height: 100px; outline: 1px solid blue;}
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>