Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive

Is there a way to insert a custom component between two fields in schema?

5 replies
Last updated: Nov 9, 2020
Hello,is there a way to insert a custom component ( containing
<hr />
to separate them visually) between two fields in schema?
Nov 9, 2020, 8:31 AM
Nov 9, 2020, 8:37 AM
Nov 9, 2020, 8:37 AM
I mean for the studio view it self. Something like this, where Break is adding an hr to visually separate the fields

{

title: 'Title',

name: 'title',

type: 'string',

},


{

name: 'Break'

type: 'break'

},


{

title: 'Slug',

name: 'slug',

type: 'slug',

readOnly: true,

},
Nov 9, 2020, 8:50 AM
Aha - the only way to do that today is by a custom input component, something like this:
import React from 'react'

const SectionBreak = () => <hr />

export default {
// ...
  {
    name: 'break',
    type: 'string',
    inputComponent: SectionBreak
  }
// ...  
}
Not super smooth, but it will do the job. That being said, we have plans to make stuff like this easier in the near future.
Nov 9, 2020, 9:10 AM
inputComponent, was looking for that part! Thanks
Nov 9, 2020, 9:11 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?