Form hooks not returning when specifying custom component in actions

default discord avatar
TrueDub
last month
1 1

I have a custom component which is going to start a process to copy specified data to S3:

export const CustomPreviewButton: React.FC = () => {
	const form = useForm();
	console.log('1');
	console.log(JSON.stringify(form, null, 2));
	const { collection } = useDocumentInfo();
	console.log('z');
	console.log(JSON.stringify(collection, null, 2));
	const publish = async () => {
		console.log('a');
	};

	return (
			<Button onClick={publish}>Publish to Preview</Button>
	);
};

This custom component is added to my collection config as part of the admin section:

const Documents: CollectionConfig = {
	slug: 'documents',
	...collectionAuditFields,
	admin: {
		group: 'Global',
		useAsTitle: 'identifier',
		defaultColumns: ['identifier', 'slug'],
		hidden: isCollectionVisibleForRoles(['owner', 'admin', 'documentEditor']),
		components: {
			views: {
				Edit: {
					Default: {
						actions: [CustomPreviewButton]
					}
				}
			}
		}
	},

Rest omitted.

My 2 hook calls in the custom component are always empty objects. Adding a useLocale() call gives me the correct locale, so hooks are working.

I'm sure I've misunderstood or omitted something - can anyone point me in the right direction?

  • default discord avatar
    TrueDub
    last month

    I've changed approach, and solved this. Instead of using the views section I added a new UI field to the collection, giving my button class as the field entry. All hooks work perfectly now, and I can use these to deliver the functionality I need.

Open the post
Continue the discussion in GitHub
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.