Unable to make 3.0.0-alpha.7 work with react 16.9

[jimtang2]

I have the following code:

const MyComponent = props =>
  <div>
    <Reorder
      reorderId="research"
      className={"reorder"}
      lock="horizontal"
      holdTime={500}
      onReorder={() => {console.log("reorder")}}
      autoScroll={true}
      disabled={false}
      disableContextMenus={true}>
        {["1","2","3","4"].map(v => <Cell key={v} name={v} />)}
    </Reorder>
  </div>

const Cell = props =>
  <div style={{
    backgroundColor: "lightpink", 
    border: "1px solid green", 
    padding: 20, 
    userSelect: "none"}}>{props.name}</div>

It doesn't seem to work and I feel stupid for asking but am I missing something?

[JakeSidSmith]

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

[JakeSidSmith]

Closing due to lack of response.

[DoubleHelixX]

Hooks Implementation: @JakeSidSmith @tjimsk

1. Use useCallback for the same functionality you would do when binding this to a function within a Class component.
2. 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.

3. 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([])

4. 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.

• https://media.giphy.com/media/BZnpNKIWXvz55j4Z31/giphy.gif

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

[tmm1]

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

[JakeSidSmith]

Hey, @tmm1 could you please open a pull request, or new issue?