react-sortablejs-typescript
React component wrapping SortableJS written in Typescript!
TODO list before releasing on react-sortable v2.x
- Create examples from SortableJS Examples
- Create all tests for examples (for 'ron)
- Currently weve got a few.
- Test the following UI component libraries:
- MaterialUI
- AntD
- Styled Components
- React Bootstrap
- React Grommet
- React Toolbox
- Your suggestion? :)
Features
SortableJS
Everything you love about SortableJS, including to but not limited to:
- Drag and Drop between lists
- Multidrag and Swap plugin support.
Component Specific
- Calculates items in list automatically
- Updated API via
props
. Feels more like react than ever before. - Compatible with third part UI libraries
- SortableJS Plugin Support
If you find any features lacking, create an issue and/or pull request.
Installation
npm install --save react-sortablejs-typescript# OR yarn add react-sortablejs-typescript
What you should endeavour to know.
- Explore the Sortable Options API
- Array.map
- React.forwardRef
Usage/Examples
Function Component
;; ;
Class Component
;;
div
as the parent by default.
ReactSortable renders a 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
.
Let's explore both here.
HTML Element
Here we will use a ul
. You can use any HTML.
Just add the string and ReactSortable will use a li
instead of a div
.
;; ;
Custom Component
When using a custom component in the tag
prop, the only component it allows is a forwardRef
component.
Solution
If it doesn't have one, you can add one using React.forwardRef()
.
This fantastic API allows the ref to be visible when creating components.
Use this when third party UI libraries.
NOTE: You may experience inconsistencies with this until we launch the proper version.
todo: Some third party UI components may have nested elements to create the look they're after. This could be an issue and not sure how to fix.
;; // This is just like a normal component, but the; ;
How does it work?
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.
Caveats / Gotchas
key !== index
DO NOT use the index as a key for your list items. Sorting will not work.
In all the examples above, I used an object with an ID. You should do the same!
I may even enforce this into the design to eliminate errors.
setState()
Problem
setState
takes one argument only. If we look in the type defs, it does say that it has a second argument, but it is already deprecated. ReactSortable passes three arguments to setState
.
If you pass the setState
straight from a useState
hook, it will work as expected. However, there will be a warning in the console:
Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().
It's just a warning and there's nothing to worry about. Nothing will break if you leave the messages there.
;; ;
This is just a warning, but can be annoying when developing.
Instead of passing setState
in directly, be explicit in your callback:
;; ;
Nesting
Problem
Basically the child updates the state twice. I'm working on this.
What does work?
Our usage indicates that as long as we only move items between lists that don't use the same setState
function.
I hope to provide an example soon.
Solutions
We don't have anything that works 100%, but here I'd like to spit ball some potential avenues to look down.
- Use
onMove
to handle state changes instead ofonAdd
,onRemove
, etc. - Create a Sortable plugin specifically for react-sortbalejs