You should focus the `features` of your app, not DnD boilerplate.
npm install @thaddeusjiang/react-sortable-listYou should focus the features of your app, not DnD boilerplate.
- [x] Easy Drag & Drop sort items
- [x] Both Render Props and Children
- [x] Custom Drag Handler
- [x] Horizontal Sortable List
``sh`
npm install @thaddeusjiang/react-sortable-list
if you don't use Tailwind CSS
`ts
import { SortableList } from '@thaddeusjiang/react-sortable-list';
import '@thaddeusjiang/react-sortable-list/dist/index.css';
`
if you use Tailwind CSS
`ts
import { SortableList } from '@thaddeusjiang/react-sortable-list';
`
modify tailwind.config.js
`diff
// tailwind.config.js
+ const path = require("path");
module.exports = {
content: [
"./src/*/{js,ts,jsx,tsx}",
+ path.join(
+ require.resolve("@thaddeusjiang/react-sortable-list"),
+ "../*/.{js,ts,jsx,tsx}"
+ ),
],
theme: {},
plugins: [],
};
`
`jsx`
export const ItemRenderExample: React.VFC = () => {
const [items, setItems] = useState
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
{ id: '3', name: 'Item 3' },
]);
return (
setItems={setItems}
itemRender={({ item }: ItemRenderProps) => (
{item.name}
)}
/>
);
};
`jsx
export const ChildrenExample: React.VFC = () => {
const [items, setItems] = useState
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
]);
return (
{({ items }: { items: SortableItemProps[] }) => (
<>
{items.map((item: SortableItemProps) => (
{item.name}
))}
)}
);
};
`
`jsx
const DragHandler = (props) => (
className=" flex justify-center items-center h-8 w-8 rounded border m-4 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:bg-blue-500 hover:text-white duration-300"
>
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
strokeLinejoin="round"
d="M3 7.5L7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5"
/>
export const DragHandlerExample: React.VFC = () => {
const [items, setItems] = useState
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
{ id: '3', name: 'Item 3' },
]);
return (
{({ items }: { items: SortableItemProps[] }) => (
{items.map((item: SortableItemProps) => (
id={item.id}
DragHandler={DragHandler}
className="flex border items-center w-40"
>
{item.name}
))}
)}
);
};
`
Custom Event would work as well in SortableItem Component with DragHandler.
`diff
export const ComplexComponentExample: React.VFC = () => {
const [items, setItems] = useState
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
{ id: '3', name: 'Item 3' },
]);
return (
{({ items }: { items: SortableItemProps[] }) => (
{items.map((item: SortableItemProps) => (
+
id={item.id}
className="..."
+ DragHandler={DragHandler}
>
className="..."
id={item.id}
value={item.name}
+ onChange={(event) => {
+ const newItems = [...items];
+ const index = newItems.findIndex(
+ (item) => item.id === event.target.id
+ );
+ newItems[index].name = event.target.value;
+ setItems(newItems);
+ }}
/>
+ onClick={() => {
+ alert('delete');
+ }}
>
{/ delete icon /}
))}
)}
);
};
`
`jsx`
export const HorizontalExample: React.VFC = () => {
const [items, setItems] = useState
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
{ id: '3', name: 'Item 3' },
]);
return (
setItems={setItems}
itemRender={({ item }: ItemRenderProps) =>
horizontal
/>
);
};
`diff`
export const ItemRenderExample: React.VFC = () => {
const [items, setItems] = useState
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
{ id: '3', name: 'Item 3' },
]);
return (
items={items}
setItems={setItems}
itemRender={({ item }: ItemRenderProps) => (
{item.name}
)}
/>
);
};
Run inside another terminal:
`bash`
npm run storybook
Then run the example inside another:
`bash
npm run link
cd example
npm run link "@thaddeusjiang/react-sortable-list"
npm install
npm run start
`
`sh``
npm run run test
š¤ Thaddeus Jiang
- Website: https://thaddeusjiang.com/
- Twitter: @ThaddeusJiang
- Github: @ThaddeusJiang
Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.
Give a āļø if this project helped you!
Copyright Ā© 2022 Thaddeus Jiang.
This project is MIT licensed.
---
_This README was generated with ā¤ļø by readme-md-generator_