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

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?

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

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

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

[JakeSidSmith]

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