👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Changing the "Add Item" button text in Sanity.io using a custom inputComponent.

6 replies
Last updated: Oct 11, 2022
Hi everyone, hope you doing great! Nice that there's place like this. I have an easy question is it possible to change "Add Item" to something like "Add new category" or any other custom text. Thank you for your help!
Oct 11, 2022, 9:07 AM
Im still fairly new to Sanity and I dont think this is the right or best solution, but you could give the field a custom
inputComponent
Oct 11, 2022, 9:09 AM
ok,I see. So "Add Item" is kind of default standard right which should stay like this and better not to change it? where and which article should I read about inputComponent?
Oct 11, 2022, 9:13 AM
I don't know, maybe there actually is some options you can add to change that text. If that exists, no doubt that would be a nicer option and a lot less work than a custom
inputComponent
.but:
https://www.sanity.io/docs/custom-input-widgets
Oct 11, 2022, 9:16 AM
#sanityTeamPleaseAddThisFeature
Oct 11, 2022, 9:37 AM
Thank you!
Oct 11, 2022, 9:37 AM
I’ve used an
inputComponent
before that does just this! You can then use the
options
field in the array schema type to define the button name:
{
    name: "categories",
    title: "Categories",
    type: "array",
    of: [{ type: "category" }],
    options: { buttonTitle: "Add new category" },
},
First, in
sanity.json
, replace the default array part with your custom component:
"parts": [
    {
        "implements": "part:@sanity/form-builder/input/array/functions",
        "path": "./parts/customArrayButton.js"
    },
    ... // other parts
]
Then here’s the custom component:

import React from "react";
import { isReferenceSchemaType } from "@sanity/types";
import { AddIcon } from "@sanity/icons";
import { Button, Grid, Menu, MenuButton, MenuItem } from "@sanity/ui";
import { useId } from "@reach/auto-id";

const customArrayButton = React.forwardRef((props, ref) => {
	const { type, readOnly, children, onCreateValue, onAppendItem, value } = props;
	const menuButtonId = useId();
	const insertItem = React.useCallback(
		(itemType) => {
			const item = onCreateValue(itemType);
			onAppendItem(item);
		},
		[onCreateValue, onAppendItem]
	);
	const handleAddBtnClick = React.useCallback(() => {
		insertItem(type.of[0]);
	}, [type, insertItem]);
	if (readOnly) {
		return null;
	}

	return (
		<Grid
			gap={1}
			style={{ gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))" }}
			ref={ref}
		>
			{type.of.length === 1 ? (
				<Button
					icon={AddIcon}
					mode="ghost"
					onClick={handleAddBtnClick}
					text={type.options?.buttonTitle || "Add item"}
				/>
			) : (
				<MenuButton
					button={
						<Button
							icon={AddIcon}
							mode="ghost"
							text={type.options?.buttonTitle || "Add item…"}
						/>
					}
					id={menuButtonId || ""}
					menu={
						<Menu>
							{type.of.map((memberDef, i) => {
								const referenceIcon =
									isReferenceSchemaType(memberDef) &&
									(<http://memberDef.to|memberDef.to> || []).length === 1 &&
									<http://memberDef.to[0].icon;|memberDef.to[0].icon;>
								const icon =
									memberDef.icon || memberDef.type?.icon || referenceIcon;
								return (
									<MenuItem
										key={i}
										text={memberDef.title || memberDef.type?.name}
										onClick={() => insertItem(memberDef)}
										icon={icon}
									/>
								);
							})}
						</Menu>
					}
				/>
			)}
			{children}
		</Grid>
	);
});

export default customArrayButton;
Oct 11, 2022, 12:11 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.

Was this answer helpful?