How to format a field using a hook

[denolfe]

How do I format a specific field using a hook?

This is a common question, so I thought I'd write up a quick example.

In this BlogPosts collection, we want our slug to be a kebab-case version of the title field. We'll do this by writing a FieldHook that runs on beforeChange of the slug field and formats the incoming title field.

import { CollectionConfig, FieldHook } from 'payload/types';

// 'value' is this field's specific incoming value
// 'data' is all of the incoming values for the document
const formatSlug: FieldHook = async ({ value, data }) => {
  // return formatted version of title if exists, else return unmodified value
  return data?.title?.replace(/ /g, '-').toLowerCase() ?? value;
};

const BlogPosts: CollectionConfig = {
  slug: 'blogPosts',
  fields: [
    {
      name: 'slug',
      type: 'text',
      hooks: {
        beforeChange: [
          formatSlug,
        ],
      },
      admin: {
        readOnly: true,
      },
    },
    {
      name: 'title',
      type: 'text',
      required: true,
    },
  ],
};

export default BlogPosts;

Here is a screenshot of the result after saving:

[ciokan]

How do we listen to a change event on the title and create the slug, live, just like the title of the collection is being rendered as we type? Any idea?

[DanRibbens]

Hi @ciokan,

Here is how I handle it in a custom field component:

import React, { useEffect } from 'react';
import { useField, useWatchForm, TextInput } from 'payload/components/forms';

const slug: React.FC<{ path: string }> = ({ path }) => {
  const { id } = useDocumentInfo();
  const { getDataByPath } = useWatchForm();
  const { value, setValue } = useField({ path });

  const title: string = getDataByPath('title');

  useEffect(() => {
   // do not update the slug once it has been created by checking that `id` exists
  // if you wanted to dangerously update the slug (potentially breaking links), you could add an updateSlug checkbox field for more control
    if(!id) {
      const slug = title?.replace(/ /g, '-').toLowerCase() ?? value;
      setValue(slug);
    }
  }, [title, setValue]);

  return (
    <div>
      <span>
        <TextInput
          path={path}
          name="slug"
          value={`${value}`}
          readonly="true"
          label="Title Slug"
          readOnly
        />
      </span>
    </div>
  );
};

I modified some existing code to show how this can be done for your use case, but I haven't tested this.

[designly1]

These examples are out dated. Here's my current working solution. Also allows you to specify the tracking field to make it reusable and universal:

import React from "react";
import { Field } from "payload/types";
import { merge } from "lodash";
import SlugInput from "../ui/SlugInput";

type Slug = (
  options?: { trackingField?: string },
  overrides?: Partial<Field>
) => Field;

export const slug: Slug = ({ trackingField = "title" } = {}, overrides) =>
  merge<Field, Partial<Field> | undefined>(
    {
      name: "slug",
      unique: true,
      type: "text",
      admin: {
        position: "sidebar",
        components: {
          Field: (props) => (
            <SlugInput trackingField={trackingField} {...props} />
          ),
        },
      },
    },
    overrides
  );

import React, { useEffect, useRef } from "react";
import { kebabCase } from "lodash";
import { TextInput, useFieldType } from "payload/components/forms";

export interface SlugInputProps {
  trackingField: string;
}

export default function SlugInput(props: SlugInputProps) {
  const { trackingField } = props;

  const { value: slugValue = "", setValue: setSlugValue } =
    useFieldType<string>({
      path: "slug",
    });

  const { value: trackingFieldValue } = useFieldType<string>({
    path: trackingField,
  });

  const prevTrackingFieldValueRef = useRef(trackingFieldValue);
  const stopTrackingRef = useRef(false);

  useEffect(() => {
    console.log(trackingFieldValue);
    if (!trackingField || stopTrackingRef.current) {
      return;
    }
    if (trackingFieldValue === prevTrackingFieldValueRef.current) {
      return;
    }
    const prevSlugValue = kebabCase(prevTrackingFieldValueRef.current);
    prevTrackingFieldValueRef.current = trackingFieldValue;
    if (prevSlugValue !== slugValue) {
      return;
    }
    setSlugValue(kebabCase(trackingFieldValue));
  }, [trackingFieldValue]);

  return (
    <div>
      <TextInput
        name="slug"
        path="slug"
        label="Slug"
        description={
          slugValue
            ? `Auto generated based on ${trackingField}`
            : `Will be auto-generated from ${trackingField} when saved`
        }
        value={slugValue}
        onChange={(e) => {
          setSlugValue(e.target.value);
          stopTrackingRef.current = true;
        }}
      />
    </div>
  );
}

[Patrickroelofs]

This still works in version 3.12.0 if anyone is wondering, There are slight changes;

• the function useFieldType has been renamed to useField,
• instead of using lodash Payload now comes with a shared functions folder allowing you to use toKekabCase directly from payload.
• TextInput now comes from @payloadcms/ui