Feedback: “Your first custom input component” lesson

[kmelve]

Hi all!

We have published a new lesson on how to make a custom input component for Sanity Studio v3.

The goal of a lesson is not to give a deep dive into the API but rather give you a hands-on introduction to different parts of the Studio API. You should be able to go through the lesson by mostly just copy-pasting the code (sometimes we will omit code to make it readable, for example for schema files).

We also have a migration guide and a more conceptual introduction to custom input components on the way.

Let us know what you think!

[vincentjflorio]

I was under the false assumption that the ongoing v3 documentation has previous and next links on the individual pages given the renewed focus on the docs being a sort of cumulative build-up, and was going to write that this new area missed it.

Pages like https://beta.sanity.io/docs/learn/getting-started/edit-and-publish-content literally refer to a "next step" and then the page just ends.

Yeah, it's all over there on the left, but it's worth exploring more than one way to scoot around. I am a newbie to accessibility but I'd be super curious if someone tabbing was able to go from reading down to tabbing up and to the left to move forward.

As far as the doc itself:

• I appreciate the conciliatory tone of the intro, especially since it covers so many practical, realistic concerns (how quickly people learn, the skills you'll benefit from having
• "Paching" on the left sidebar is a typo
• On the "Importing" page, the following is a little hard to parse (no pun intended)

schemaType contains different information that comes from the current schema type that this field is connected to. You will use this to add any placeholder that comes in the field configuration.

where maybe it'd be beneficial to cite an example of a different piece of information that's contextually relevant. If I am not sure of the field configuration (or what that means) there's no real antecedent. The example is about a text input, but what if I am thinking of images? What does a placeholder mean there? (rhetorical)

• This is nitpicky but on https://beta.sanity.io/docs/learn/custom-input-component/paching-to-the-content-lake while it makes perfect sense to continue on in the same paragraph with "Fortunately," because it's continuing the same thought, it's been my experience that brains shut off after more than a few lines in a row when it comes to online writing ( a lot of major style real-world style guides pare down paragraphs by two sentences, on average, for online articles ). There's a lot here to digest in such a tiny space so a simple line break might be beneficial even though it's valid as-is.

• I love the "{/* more code to come */}" as I can't tell you how many times I read docs and it's not clear what's being hinted at when things are omitted for spatial economy. It leans into the idea that reading something is a four-dimensional activity. If docs were slides nobody would question it but when they're drawn out in writing you're usually left to guess. So thank you!

• Please consider adding a line before and after the handleChange gets introduced for readability's sake. Lots of glyphs flying around in multiple colors so emphasizing which is new only by inference could be helped by keeping space around it (it might be cool to do a Github style diffing background highlight, as if it were an IDE being operated upon.

• That's the best explanation of useCallback I've heard. It usually gets talked about too openly so having it deal with a direct example I think will be helpful to folks. Kudos!

• There's basically just one sentence in passing that addresses the utility of this specific choice of example, connecting the dots between what's being added and why, and what it's going to do. The intro page states that knowing X, Y and Z going into it will be helpful, but based on the variety of experience levels sampled from the Slack forum, doubling down on "You see this thing you're adding? What it's going to do is change that down there, and it's the whole point of why this is being custom built" could help people, especially in the circumstance where it's being encouraged to copy-paste.

[vincentjflorio]

Beautiful updates, friend! That was quick!

[kmelve]

Thanks for the thorough review @vincentjflorio!

v3 documentation has previous and next links on the individual pages

This is the plan for the “Learn” section!

Will implement some of the other suggestions too!

[davydog187]

Hello @kmelve thank you for providing this lesson. I used this when upgrading the sanity-plugin-table to V3.

It would be helpful in the lesson if you could provide guidance on how to to render preview components. You'll see in the outstanding issues of the linked PR that when the preview has focus, its not updating the background color correctly. It appears that there is either a bug in sanity v3, or this is a different way to forward the focus props to the preview component.

Would you be able to clarify that?

[codingChewie]

If you've arrived here from a search and find that the above links just redirect to the docs page I believe this guide "How to build an input component for Sanity Studio v3" would be what you're looking for.

[m4rvelous252]

Hi guys, is there a type for the props I can quickly import from the Sanity package?

[vergilius]

Hopefully that helps somehow:
there are types in sanity package, but you gotta search for specific ones depending what kind of input you use.

Example: StringInputProps for regular text input with type: string