Help with composing a custom slug component in Sanity Studio v3
7 replies
Last updated: Feb 8, 2023
A
Hey Sanity community 👋I'm composing a custom slug component in a v3 Studio but coming up short
😢 hoping someone can help me.
The aim is to prefix the slug text input with a @sanity/ui badge that shows the path prefix, in this case '/posts/'.
Here's my
Which kinda works, but gives me the ick feels & doesn't take up the full width of the form (screenshot below).
Is there a better way to do this, is it possible to pass in an
If I can't pass an icon/prefix component to the slug text input, how could I modify it to be full width?
😢 hoping someone can help me.
The aim is to prefix the slug text input with a @sanity/ui badge that shows the path prefix, in this case '/posts/'.
Here's my
slug-input.tsxcode:
import { Badge, Inline } from '@sanity/ui'
export const SlugInput = (props: any) => {
return (
<Inline
space={0}
style={{
width: '100%',
backgroundColor: 'red' // 🕵️♂️ debug
}}>
<Badge
tone='primary'
style={{
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
padding: '0.8em'
}}>
/posts/
</Badge>
{props.renderDefault({ ...props })}
</Inline>
)
}Is there a better way to do this, is it possible to pass in an
iconor
prefixprop to the text input as listed on the @sanity/ui
TextInputproperties documentation ?
If I can't pass an icon/prefix component to the slug text input, how could I modify it to be full width?
Feb 7, 2023, 4:50 PM
Commenting to follow this thread, sorry I can't be helpful
Feb 7, 2023, 4:53 PM
A
No worries
🤞
user G
😂Here's hoping someone can point me in the right direction 🤞
Feb 7, 2023, 4:55 PM
I think you’ll want to use a Flex instead of Inline.
Feb 7, 2023, 9:34 PM
A
Thanks for chiming in
user M
, I tried a Flexinitially but found it caused spacing issues - I’m AFK at the moment, will add a screenshot to demonstrate this later today.
Feb 8, 2023, 9:22 AM
S
I’m not exactly sure what you mean by passing an icon to the text input, but hopefully this solves the width issue?
import {Flex, Badge} from '@sanity/ui'
export const PrefixedSlugInput = (props) => {
const { renderDefault } = props
return (
<Flex>
<Badge
tone="primary"
style={{
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
padding: '0.8em',
height: "100%"
}}
>
/posts/
</Badge>
<div style={{ flex: 1 }}>{renderDefault(props)}</div>
</Flex>
)
}Feb 8, 2023, 9:52 AM
A
Thanks
Sanity UI docs for the text input component list both icon & prefix as available props for the input. I was wondering if this is the proper way to accomplish what I’m looking to do.
user P
, I’ll give this a try later and report back.Regarding the passing an icon/prefix to the text input, the Sanity UI docs for the text input component list both icon & prefix as available props for the input. I was wondering if this is the proper way to accomplish what I’m looking to do.
Feb 8, 2023, 10:19 AM
A
user P
Works like a charm, thank you sir 🙌import { Badge, Box, Flex } from '@sanity/ui'
export const SlugInput = (props: any) => {
return (
<Flex>
<Badge
tone='primary'
style={{
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
padding: '0.8em'
}}>
/posts/
</Badge>
<Box style={{ flex: 1 }}>{props.renderDefault({ ...props })}</Box>
</Flex>
)
}Feb 8, 2023, 4:10 PM
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.