IT Tools

Handy tools for developer

Compare Texts

WebView Playground

ReactJS Playground

Json Web Tokens

Regular Expressions

Image Crop

Color Picker

QR Code

Generate Text

Generate API Response

JSON Formatter

Number Converter

Random Wheel

Ctrl + K

SortableList

Preview

John Doe
Jane Jolly
Bob Smith
Alice Branco

Show code

<SortableList
  renderItem={item => item.name}
  onChange={console.log}
  data={[
    {
      "id": "1",
      "name": "John Doe"
    },
    {
      "id": "2",
      "name": "Jane Jolly"
    },
    {
      "id": "3",
      "name": "Bob Smith"
    },
    {
      "id": "4",
      "name": "Alice Branco"
    }
  ]}
/>

Docs

Name	Description	Default	Control
data *	List items of SortableList	-	-
renderItem *	Render function of SortableList `(data) => ReactNode`	-	-
className	Wrapper class	-	-
onChange	Ordered change event `(orderedIds: string[]) => void`	-	-

IT Tools

Tools

UI Components

SortableList

Preview

Docs