@ekala/bulma-sortable-list v0.1.1

Install

$ yarn add @ekala/bulma-sortable-list @dnd-kit/core @dnd-kit/sortable

Usage

import { useState, useEffect } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGripVertical } from "@fortawesome/free-solid-svg-icons";
import { SortableList } from "@ekala/bulma-sortable-list";

export default function List({ list }) {
    const [items, setItems] = useState();

    useEffect(() => {
        setItems(list);
    }, [list]);

    function handleSort(sortList) {
        const sortedList = sortList(items);
        setItems(sortedList);
    }

    if (!items) return null;
    if (!items.length) return null;

    return (
        <>
            <SortableList items={items} onChange={handleSort} Item={ListItem} />
        </>
    );
}

function ListItem({ item, handlerProps }) {
    return (
        <div className="box is-relative mb-4">
            <div className="subtitle">{item.name}</div>
            <div className="has-text-grey" style={{ position: "absolute", top: 0, left: 0, bottom: 0, display: "flex", alignItems: "center", padding: "1rem", cursor: "grabbing" }} {...handlerProps}>
                <FontAwesomeIcon icon={faGripVertical} />
            </div>
        </div>
    );
}