Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences →

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.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.