Netlify custom widget reorder
npm install @ncwidgets/reorderA widget for netlify-cms to handle custom ordering of a referenced collection. Powered by react-beautiful-dnd
---
⚠ Unstable: Under active development
npm i @ncwidgets/reorder
`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.