Comments (5)
Hooks Implementation: @JakeSidSmith @tjimsk
- Use useCallback for the same functionality you would do when binding this to a function within a Class component.
- Instead of the helper function I instead used something I was familiar with for reordering arrays.
- Install npm install array.prototype.move --save
- Import "array.prototype.move" so you can use the .move functionality. More about this here.
-
You would have useState declared or useSelector if you are using Redux. For this example I am using useState for now.
const [photos, setPhotos] = useState([])
-
You would then set your state within the useCallback hook expanding upon bullet point number 1. In this example I have the set state reference declared as setPhotos.
const OnReorder = useCallback((event, previousIndex, nextIndex, fromId, toId) => {
console.log("onReorder:", event, previousIndex, nextIndex);
if ( CONDITIONAL_STATEMENT)
setPhotos([...photos.move(previousIndex, nextIndex)]);
},
[photos] // Tells React to memoize regardless of arguments
);
For the Reorder component, I pass in the hook reference: onReorder={OnReorder}.
<Reorder
reorderId="research"
className={"reorder"}
// lock="horizontal"
holdTime={1000}
component="span"
mouseHoldTime={100}
onReorder={OnReorder}
autoScroll={true}
disabled={false}
disableContextMenus={true}
placeholder={
<S.Placeholder /> // Custom placeholder element (optional), defaults to clone of dragged element
}
>
I'm creating a Tinder Clone and wanted to have something similar to their drag and drop system.
I managed to replicate 90% of the same look.
Side Note
I was searching for a drag and drop reorder component and stumbled upon two.
However, I haven't played around with the second option and I believe it doesn't have callback functionality but I could be wrong.
Leaving this here in case it could help others:
- A second option was created by VaishakVk called react-drag-reorder.
- Also for those wanting to see the full code I use for the Tinder Clone I am working on, I will update this post soon when I finish the project. [Github Link Coming Soon]
- Lastly, I would love the functionality where I can have access to the hover position index before dropping. This way I can update my state on its hover position rather than its drop position @JakeSidSmith
from react-reorder.
Does your onReorder
callback get called?
I think the issue is that you're passing a static set of items (["1","2","3","4"]
).
react-reorder
expects you to handle the reordering yourself, it merely handles the dragging and provides some utils to make reordering easier.
You'll need to store your items in state somewhere (whether on the component or redux or hooks doesn't matter), and then handle reordering them.
Make sure you're looking at the v3
documentation which is not currently on the master branch: https://github.com/JakeSidSmith/react-reorder/blob/rework/README.md#callback-functions
from react-reorder.
Closing due to lack of response.
from react-reorder.
I am currently using react 16.13.1 without issue, but would like to upgrade to react 17 and currently see the following warning:
react_devtools_backend.js:2430 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: Reorder
from react-reorder.
Hey, @tmm1 could you please open a pull request, or new issue?
from react-reorder.
Related Issues (20)
- Less performant deeper in the dom? HOT 1
- Please add events on "drag start" and "drag end" HOT 3
- Can't disable auto scroll HOT 7
- Another complete re-write in TypeScript, with hooks, React 16-17 support, and more HOT 4
- can't reorder
- TypeError: this.state.draggedStyle is null HOT 2
- Update PropTypes HOT 1
- Warning: This synthetic event is reused for performance reasons. HOT 3
- placeholder class is not added when dragging input fields HOT 3
- Overriding sorting behavior HOT 10
- V3 Alpha Issues HOT 47
- Warning with react 15.5.0 HOT 12
- can't control dragged div HOT 17
- Images Reloading/Flashing HOT 9
- Error: Expected reorderId to be a string. Instead got undefined HOT 12
- Tidy up prop documentation in readme (v3) HOT 2
- Support React v16 HOT 11
- Issues with embedded images? HOT 6
- Unable to set reorder to a button HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-reorder.