`sortablejs` and `@types/sortablejs` are peer dependencies. The latter only used if intellisense/typescript is desired.

`sortablejs` and `@types/sortablejs` are peer dependencies. The latter is only used if intellisense/typescript is desired.

npm install --save react-sortablejs sortablejs

- Shopping List: # list of items / sortable. This represents `react-sortablejs`

- eggs # list item. These are all the items in the list and is what you move around.

- eggs # list item. These are all the items in the list and are what you move around.

- bread # list item

- milk # list item

});

import React from "react";

These are all defaults DOM attributes. Nothing special here.

These are all default DOM attributes. Nothing special here.

If you're using `{group: { name: 'groupName', pull: 'clone'}}`, this means your in 'clone' mode. You should provide a function for this.

If you're using `{group: { name: 'groupName', pull: 'clone'}}`, this means you're in 'clone' mode. You should provide a function for this.

Check out the source code of the clone example for more information. I'll write it here soon.

ReactSortable is a `div` element by default. This can be changed to be any HTML element (for example `ul`, `ol`)

or can be a React component.

This value, be the component or the HTML element should be passed down under `props.tag`.

This value, be it the component or the HTML element, should be passed down under `props.tag`.

Let's explore both here.

Here we will use a `ul`. You can use any HTML.

Here we will use an `ul`. You can use any HTML.

Just add the string and ReactSortable will use a `ul` instead of a `div`.

When using a custom component in the `tag` prop, the only component it allows is a `forwardRef` component.

Currently we only support components who use the `React.forwardRef` API.

Currently, we only support components that use the `React.forwardRef` API.

If it doesn't have one, you can add one using `React.forwardRef()`.

import React, { FC, useState, forwardRef } from "react";

Sortable affects the DOM, adding, and removing nodes/css when it needs to in order to achieve the smooth transitions we all know an love.

This component reverses many of it's actions of the DOM so React can handle this when the state changes.

This component reverses many of its actions of the DOM so React can handle this when the state changes.

Basically the child updates the state twice. I'm working on this.

Basically, the child updates the state twice. I'm working on this.

We don't have anything that works 100%, but here I'd like to spit ball some potential avenues to look down.

We don't have anything that works 100%, but here I'd like to spitball some potential avenues to look down.

- Use `onMove` to handle state changes instead of `onAdd`,`onRemove`, etc.

- Create a Sortable plugin specifically for react-sortbalejs