Reorder Widget for NetlifyCMS

A widget for netlify-cms to handle custom ordering of a referenced collection. Powered by react-beautiful-dnd

---

⚠ Unstable: Under active development

Installation

``
npm i @ncwidgets/reorder
`

Demo

Live demo

Example use

* Order items in a grid from another collection (using custom reorder-component).

* Setup a custom order for any collection.

How to use

$3

Assuming that posts are a separate collection that contains fields id and title.

`yml
- label: Featured Posts
name: featured
widget: ncw-reorder
collection: posts
id_field: id
display_template: '{{id}} | {{title}}'
`
#### Widget specific fields
* collection (required) is the name of the referenced collection.
* id_field (required) is a field in the referenced collection which has to be an unique identifier.
* display_template A string template with fields of the target entry. Use dot notation for nested fields & bracket for array: {{address.zipCode}} | {{categories[0]}}




Read more about configuration options on netlifyCMS.

$3


`js
import cms from 'netlify-cms-app'
import { Widget as ReorderWidget } from '@ncwidgets/reorder'

cms.registerWidget(ReorderWidget)

cms.init()
`

$3

`js
import cms from 'netlify-cms-app'
import { createWidget } from '@ncwidgets/reorder'

const ListComponent = ({ item }) => (
<>
{item.title}


{item.id}

)

const CustomReorderPreview = ({ items }) => (

---

Custom Widget Preview

{items.map((item, i) =>

{item.title}

)}

)

const customReorderWidget = createWidget({
renderControl: ({ value }) => ,
renderPreview: ({ value }) => ,
})

cms.registerWidget({
name: 'custom-reorder',
...customReorderWidget,
})

cms.init()
`

Contribute

Found a bug or a missing feature? Please feel free to send over a PR, or open an issue with the bug or enhancement` tag.