react-sortablejsとreact-hook-formで並び替え

入力フォームの並び替え

ドラッグ&ドロップで並び替えできるreact-sortablejsとreact-hook-formsを組み合わせた並び替えできる入力フォームの備忘録

サンプルソース

import { ReactSortable } from 'react-sortablejs'
import { useFormContext, useFieldArray } from 'react-hook-form'
import Forms from './forms'

const sortableInputs = ()=>{
    const {
        control,
        formState: { errors },
    } = useFormContext()
    
    const { fields, swap } = useFieldArray({
        name: 'contents',
        control,
    })

    const onEnd = (evt:any)=>{
        swap(evt.oldIndex, evt.newIndex)
    }

    return <>
        <ReactSortable list={fields} setList={()=>{}} onEnd={onEnd}>
          {fields &&
            fields?.map?.((field: any) => {
              return (
                <Forms
                  key={field?.id}
                  field={field}
                />
              )
            })
        }
        </ReactSortable>
    </>
}

ReactSortableではsetListではなくonEndを使う。onEndではoldIndexとnewIndexがあるので、useFieldArrayにそもそも備わっているswap()で処理ができる。