useLiveData Hook

useLiveData Hook#

The useLiveData hook is a utility volto-light-theme that provides a single source of truth for field values while creating or editing content. It ensures that values are always up-to-date:

  • Add/Edit mode → reads live values from the Redux form state.

  • View mode → falls back to the content object or inherited behavior data.

  • Error views → falls back to inherited behavior data from errorContext in the Redux store.

This allows components to display field values that update immediately as the user types or updates value.

Signature#

function useLiveData<T>(
  content: Content,
  behavior: string | undefined,
  field: string,
): T | undefined

How It Works#

  1. Detects if the current route is in add mode (/add).

  2. If in add mode → always return the live form value from state.form.global.

  3. Otherwise → return the live form value if present, else fallback to:

    • Behavior data if behaviour is defined(content['@components'].inherit[behavior].data[field])

    • Or get the direct field value on the content object.

    • Or get the field value from state.errorContext if there is no content object.

This ensures the value is reactive to user input while editing and correctly reflects stored content in view mode.

Example Usage#

The following example demonstrates how to use useLiveData in a component that displays tags from content. It works both in add/edit mode (live-updating values) and view mode (falling back to stored content).

import { useLiveData } from 'hooks/useLiveData';
import { Link } from 'react-router-dom';
import { config } from '@plone/volto';

const Tags = ({ content }) => {
  // Get tags from content; live updates in add/edit mode
  const tags = useLiveData(content, undefined, 'subjects') || [];

  const Container =
    config.getComponent({ name: 'Container' }).component || SemanticContainer;

  if (!config.settings.showTags || !tags.length) return null;

  return (
    <Container className="default tags">
      {tags.map((tag) => (
        <Link className="ui label" to={`/search?Subject=${tag}`} key={tag}>
          {tag}
        </Link>
      ))}
    </Container>
  );
};

Example: Behavior-based Live Data#

useLiveData also works with fields provided by inherited behaviors (provided by @inherit endpoint). For instance, in the FollowUsPostFooterLogoAndLinks component, several fields are loaded via behaviors:

const social_links = useLiveData(content, 'plonegovbr.socialmedia.settings', 'social_links');
const footer_links = useLiveData(content, 'voltolighttheme.footer', 'footer_links');
const post_footer_logo = useLiveData(content, 'kitconcept.footer', 'post_footer_logo');

Explanation#

  • Content: The content object.

  • Behavior: The behavior you describe in backend.

  • Field: The field name.

  • Add/Edit mode: These values update live as the user changes the corresponding fields.

  • View mode: They fallback to the stored content or behavior data.

  • Full component reference: See FollowUsPostFooterLogoAndLinks for the full implementation, which renders Follow Us links, footer links, and a post footer logo.

Contents