React component wrapping SortableJS written in Typescript!
- 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? :)
Everything you love about SortableJS, including to but not limited to:
- Drag and Drop between lists
- Multidrag and Swap plugin support.
- 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.
npm install --save react-sortablejs-typescript
# OR
yarn add react-sortablejs-typescript- Explore the Sortable Options API
- Array.map
- React.forwardRef
import React, { FC, useState } from "react";
import { ReactSortable } from "react-sortablejs-typescript";
interface ItemType {
id: number;
name: string;
}
export const BasicFunction: FC = props => {
const [state, setState] = useState<ItemType[]>([
{ id: 1, name: "shrek" },
{ id: 2, name: "fiona" }
]);
return (
<ReactSortable list={state} setList={setState}>
{state.map(item => (
<div key={item.id}>{item.name}</div>
))}
</ReactSortable>
);
};import React, { Component } from "react";
import { ReactSortable } from "react-sortablejs-typescript";
interface BasicClassState {
list: { id: string; name: string }[];
}
export class BasicClass extends Component<{}, BasicClassState> {
state: BasicClassState = {
list: [{ id: "1", name: "shrek" }]
};
render() {
return (
<ReactSortable
list={this.state.list}
setList={newState => this.setState({ list: newState })}
>
{this.state.list.map(item => (
<div key={item.id}>{item.name}</div>
))}
</ReactSortable>
);
}
}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.
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.
import React, { FC, useState, forwardRef } from "react";
import { ReactSortable } from "react-sortablejs-typescript";
interface ItemType {
id: string;
name: string;
}
export const BasicFunction: FC = props => {
const [state, setState] = useState<ItemType[]>([{ id: "1", name: "shrek" }]);
return (
<ReactSortable tag="ul" list={state} setList={setState}>
{state.map(item => (
<div key={item.id}>{item.name}</div>
))}
</ReactSortable>
);
};When using a custom component in the tag prop, the only component it allows is a forwardRef component.
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.
import React, { FC, useState, forwardRef } from "react";
import { ReactSortable } from "react-sortablejs-typescript";
interface ItemType {
id: string;
name: string;
}
// This is just like a normal component, but the
const CustomComponent = forwardRef<HTMLDivElement, any>((props, ref) => {
return <div ref={ref}>{props.children}</div>;
});
export const BasicFunction: FC = props => {
const [state, setState] = useState<ItemType[]>([
{ id: 1, name: "shrek" },
{ id: 2, name: "fiona" }
]);
return (
<ReactSortable tag={CustomComponent} list={state} setList={setState}>
{state.map(item => (
<div key={item.id}>{item.name}</div>
))}
</ReactSortable>
);
};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.
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 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.
import React, { FC, useState } from "react";
import { ReactSortable } from "react-sortablejs-typescript";
interface ItemType {
id: string;
name: string;
}
export const BasicFunction: FC = props => {
const [state, setState] = useState<ItemType[]>([{ id: "1", name: "shrek" }]);
return (
<ReactSortable
list={state}
// will cause warnings in dev mode only.
setList={setState}
>
{state.map(item => (
<div key={item.id}>{item.name}</div>
))}
</ReactSortable>
);
};This is just a warning, but can be annoying when developing.
Instead of passing setState in directly, be explicit in your callback:
import React, { FC, useState } from "react";
import { ReactSortable } from "react-sortablejs-typescript";
interface ItemType {
id: string;
name: string;
}
export const BasicFunction: FC = props => {
const [state, setState] = useState<ItemType[]>([{ id: "1", name: "shrek" }]);
return (
// `sortable` and `store` arguments are here just to show what arguments have been passed.
// They are not required to be used and you shouldn't really need them.
<ReactSortable
list={state}
// will not cause warnings in dev mode only.
setList={(newState, sortable, store) => setState(newState)}
>
{state.map(item => (
<div key={item.id}>{item.name}</div>
))}
</ReactSortable>
);
};Basically the child updates the state twice. I'm working on this.
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.
We don't have anything that works 100%, but here I'd like to spit ball some potential avenues to look down.
- Use
onMoveto handle state changes instead ofonAdd,onRemove, etc. - Create a Sortable plugin specifically for react-sortbalejs